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今日 、Web に か か わる 機会 は 多く な っ て いま す 。 Web を 制作 する た め に は さま ざま な 
技術 が 使わ れ ま す 。 Web ペ ー ジ を 作成 する 「HTML」 や 、 デ ザイ ン を 行う 「CSS」 な ど 、 
た くさ ん の 技術 が あり ます 。 学校 や 仕事 で これ ら の 技術 を 学び 、 一 通り の Web ペ ー ジ が 
制作 で きる よう に な っ た ! と いう 方 も 多い か も し れ ま せん 。 

けれ ども 、Web ペ ー ジ を プロ グラ ミン グ す る た め の 「JavaScript」 は どう で し ょ う 
か ? Web ペ ー ジ を 一 通り 制作 で きる よう に な っ た けれ ども 、 プ ログ ラミ ング は ちょ っ 
と 敷居 が 高い か な ぁ ・・・ と 思わ れ て いる 方 は 多い か も し れ ま せん 。 JavaScript を 使っ た 
Web 開 発 を 学ん で いき た いと 思っ て いる けれ ども 、 な か な か 手 が 出せ な いな ぁ ・・・ と 
感じ て いら っ し ゃ る 方 は 多い こと で し ょ う 。 

本 書 は JavaScript の 知識 を わか りや すく 解説 する よう に 心がけ まし た 。 プ ログ ラミ ン 
グ に な じみ の な い 方 に と っ て も 、 無 理 な く 学 習 で きる よう に 構成 され て いま す 。 本 書 に 
は た くさ ん の サン プル ペー ジ が 掲載 され て いま す 。 実際 に 自分 で Web ペ ー ジ を 作成 し 、 
プロ グラ ム の 動作 を 確認 し な が ら 読 み 進 め る こと が で きま す 。 学ん だ 知識 を Web 制作 ・ 
開発 に 生か し て いく た め の ア イデ ア や ヒン ト を 得る こと も で きる で し ょ う 。 

JavaScript の 基本 を 学び 、 ぜ ひ Web 制 作 ・ 開 発 技術 を 高め て いっ て みて くだ さい 。 

本 書 が 読者 の みな さま の お 役 に た つこ と を 願っ て お り ま す 。 


著者 
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第 1 章 


準備 体操 し よう ! 


ik っ 】EYek 0 ルケ / ジ 的 ENV/c に Tel ll o)2 コ ドウ 長井 ウ 4 ロレ ルン た や シル ン ル 2: コル ソ だ さら ぱー 
1 の の > 中 月 ウロ レル レン アパ マコ (ひだ た だき p】 ト (入り 1P』E や さい (の kc の あさ py/ 二 アウ 
ログ ラミ ング を は じ め る に は 準備 体操 が 必要 で す 。 この 章 で は プロ グラ ミ 
ング を は じ め る た め に 必要 な 知識 を 学ん で いき まし ょ う 。 











私 た ち は こ れ か ら JavaScript を 使 お うと し て いま す 。 JavaScript を 使う と 、 一 体 ど ん な こと 
が で きる の で し ょ うか ? 

JavaScript を 使え ば 、 魅 力 的 な Web サ イト を 開発 する こと が で きま す 。 撮影 し た 数 多く の 写 
真 を 整理 し 、 表 示 で きま す 。 カ ー ト に 入れ た 商品 を チェ ッ ク し 、 合計 金額 を 計算 する こと も で き 


ます 。 マ ッ プ を 利用 し た Web サ イト を 作成 する こと も で きる で し ょ う 。 
JavaScript は Web サ イト を 開発 する と き に 使え る 、 大 変 便利 で 応用 範囲 の 広い 技術 な の で す 。 























天 Web サ イト と JavaScript 


@9669 サン プル wm 


| Q へ Coogle で 検索 、 ま た は アド レス を 入 ナ C > 
0 | 0SSERG9R : 








es 人 
S-- マ ノ / が か が ) / 


JavaScript を 使え ば Web ペ ー ジ を 操作 し 、 動 か し て いく こと が で きる よう に な り ま す 。 で は 、 
どう し て JavaScript は Web ペ ー ジ を 動か すこ と が で きる の で し ょ うか ? 





1-1 JavaScript で や っ て みよ う ! 


それ は 、JavaScript が 、 
プロ グラ ミン グ 言 語 


と いう も の で ある か ら で す 。 プ ログ ラミ ング 言語 は 、 コ ンピュータ の プロ グラ ム を 書く た め の 言 
葉 で す 。 プ ログ ラミ ング 言語 は 、 プ ログ ラム を 作成 する の に 欠か せな い 技 術 と な っ て いま す 。 こ 
の プロ グラ ム と は 、 い っ た い ど の よう な も の な の で し ょ うか 。 

















較 プロ グラ ム 
プロ グラ ム は 、 コ ンピュータ が 「 ど ん な ふう に 動く の か 」 と いう 動作 を あら か じ め 設 計 し た も 
の で す 。 こ の コン ピュ ー タ と は 、 携 帯 端末 な ど に 含ま れ て いる コン ピュ ー タ で も か まい ませ ん 。 
た と えば 、 旅 行 会 社 の Web サ イト を 開発 する こと に な っ た と 考え て みて くだ さい 。 こ の と き 、 
「 大 人 3 人 分 の バス 代金 額 を 計算 する 」 な ど と いう コン ピュ ー タ な ら で は の 処理 を し た いと し ま 
じ 表 。 





居 コ ンピュータ に 仕事 を し て も らい た いな ・・・ 





この と き 、 コ ンピュータ の た め に 、 次 の よう な 指示 ・ 手 順 を 設計 し て お く の で す 。 
時 日 本 語 で 書い て みた プロ グラ ム 
1 人 分 の バス 代 を 設定 し て お く 


バス 代 を 3 倍 する 
合計 金額 を 表示 する 








ーV' 灯 で 藩 正 午 蘭 | ーー] 
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準備 体操 し よう ! 


私 た ち は こ うし た 指示 を プロ グラ ム と し て 作成 ・ 準 備 し ます 。 プ ログ ラム を 用 意 し 、 そ の と 
お り に コン ピュ ー タ を 動か そう 、 と いう わけ で す 。 





園 プロ グラ ミン グ 言 語 

さて 、 相 手 が 人 間 で あれ ば 、「 バ ス 代 を 計算 し て ! 」 と いう 指示 を 伝え れ ば 、 す ぐに 意味 を わ 
か っ て も ら え る で し ょ う 。 け れ ど も コン ピュ ー タ に は その まま の 指示 で は 伝わり ませ ん 。 私 た ち 
は コン ピュ ー タ に も 伝わる よう な 言葉 で 指示 を し な けれ ば な り ま せん 。 こ の と き 使 われ る 言葉 
が 、 プ ログ ラミ ング 言語 な の で す 。 

人 間 の 言語 に 英語 や 中 国語 、 日 本 語 … な どの 種類 が ある よう に 、 プ ログ ラミ ング 言語 に も た 
くさ ん の 種類 が あり ます 。 JavaScript は も っ と も シン プル な プロ グラ ミン グ 言 語 の ひと つと な っ 
て いま す 。 











司 コ ンピュータ に 指示 する た め に いろ いろ な 言葉 が ある 


JavaSCript 


ーー 





し 】 





プロ グラ ミン グ 言 語 は た くさ ん の 種類 が あり ます 。 本 書 で 学ん で いく JavaScript の ほか 、 


PHP な ど と 呼ば れる 言語 が 有名 で す 。 いろ いろ な プロ グラ ミン グ 言 語 を 習得 し て いく こと 
で 世界 が 広がり ます 。 


JavaScript の 場合 は 、 バ ス 代 の 計算 に つい て 次 の よう に 指示 を する こと に な り ま す 。 


記 JavaScript で 書い て みた プロ グラ ム 


var bus = 288: バス 代 を 設定 し ます 

Var sum = buS * 3: 

document .write(sum): 3 人 分 の 料金 を 計算 し ます 
合計 額 を 表示 し ます 


いか が で し ょ うか ? くわ し い 意 味 は わか ら な く て も 、 少 し だ け で も イメ ー ジ が つか め た で し 
ょ うか ? 少し 難し く 感 じ ら れ る か も し れ ま せん が 、 こ うし た プロ グラ ミン グ 言 語 を 習得 すれ 
ば 、 多 彩 な Web サ イト を 開発 し て いく こと が で きる よう に な り ま す 。 Web サ イト の 開発 に 携 わ 
る 人 間 の 一 人 と し て 力 を つけ て いく こと が で きる で し ょ う 。 

それ で は 、JavaScript で Web サ イト を 開発 する 手法 を 学ん で いき まし ょ う ! 











ーJ'C 沙 人 各層 | っ 








最初 に 開発 を する た め に 必要 な ツー ル を 準備 し まし ょ う 。 JavaScript で 開発 を する た め に は 
次 の ツー ル を 用 意 す る 必要 が あり ます 。 


園 PC (パソ コン ) 


まず 、 最初 に 必要 と な る も の が 、PC (パソ コン ) で す 。 一 般 的 な PC は 、 ノ ー ト 型 や デス クト ッ 
プ 型 と 呼ば れる 形 を し て いま す 。 ま た 、 よ く 使 われ る PC の 種類 と し て Windows と Mac が あり 
ます 。 


硬 ノ ー ト 型 PC と デス クト ッ プ 型 PC 


ノー ト 型 PC デス クト ッ プ 型 PC 


1 
wZ 








園 エディ タ 


次 に 必要 と な る も の が エディ タ (テキ スト エディ タ ) で す 。 エディ タ は 、 文字 の 並び (テキ スト ) 
を 保存 する た め の ツ ー ル で す 。 エ ディ タ で 作成 し た ファ イル は 、 テ キス ト フ ァイル と いう 文字 の 
並び だ け を 保存 し た シン プル な ファ イル と な り ま す 。 








ーJiw で 落下 喜 層 | 1】 


Web ペ ー ジ の 基本 は 、HTML 言語 で 記述 され た テキ スト ファ イル で す 。 こ の Web ペ ー ジ を 入 
力 す る た め の ツ ー ル が エディ タ な の で す 。 
Mac で は 「 テ キス ト エ ディ ッ ト 」、Windows で は 「 メ モ 帳 」 と いう エディ タ が 標準 的 に イン スト 
ー ル され て いま す 。 
玉 テ キス ト エ ディ ッ ト (Mac) 時 メモ 帳 (Windows) 
編集 活 み 


<!DOCTYPE htm> 
htmt teng=" Js"> | アイ ル ME) 手 筑 (E) 書式 (O) 表示 (Y) へ ルカ B) 
need> <IDOCTYPE html| 

<meta charset="utf= 和 8"> <htm| lang= ja > 

<Unk ret="stylesheet" href="Sample.css"> < 

<titte> サ ンプ ブル </t#t te> <link rel="styleshest" href="Sample.css> 
<script type="text/]avascript"> 

Tunctton wetcowe() 


window.alert(" よ うこ そ ! ログ イン し て くだ さい 。") : 


window.alert(" ど ようこそ! ログ イン し て くだ さい 。"): 


} 
</scr1Pt> 


</script> 
<1me src="Sampte.jpg" necke"wetcowe()"/ テ </hea ゆ 
</body> 
</htmt> 


く body> の e 
く img src="Sample.jpg" onclick= welcome" の 
</body> 


</html> 








TiP ら 


文章 を 作成 する 際 に よく 使わ れ て いる 文書 作成 ソフ ト (ワー プロ ) は 、 文字 の 並び 以外 の 
文書 レイ アウ ト 情 報 な ども 保存 する た め 、 プ ログ ラミ ング を し て いく と き に は 使い ませ 
ん 。 文字 の 並び だ け を 保存 する エディ タ を 使用 する よう に し て くだ さい 。 な お 、 Mac の テ 
キス ト エ ディ ッ ト は 、 標準 の 設定 で は レイ アウ ト 情 報 が 保存 され る た め 、 あ ら か じ め テ キ 
スト ファ イル を 扱う た め の 環境 設定 を し て お く 必 要 が あり ます 。 テキ スト エディ ッ ト の 環 
境 設定 の 画面 を 開き 、「 フ ォ ー マ ッ ト 」 オプ ショ ン で 「 標 準 テ キス ト 」 を 選択 し て くだ さい 。 
また 、 エディ タ を 組み 込ん だ プロ グラ ミン グ 専 用 の 開発 ツー ル を 使う こと も あり ます 。 さ 
ま ざ ま な 種類 の 開発 ツー ル が 公開 され て いま す 。 


ブラ ウザ 
最後 に 必要 と な る も の が ブラ ウザ (Web ブ プラウザ) です 。 ブ ラウ ザ は 、 エ ディ タ で 作成 し た 


HTML フ ァイル を Web ペ ー ジ と し て 表示 し て くれ る ツー ル で す 。 「Safari」「Internet Explorer」 
「Google Chrome」「Firefox. な ど が あり ます 。 
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還 Safari (Mac) 居 Internet Explorer (Windows) 


@@G6 サン ブル we 














MI) 


ブラ ウザ が 動作 する の は PC 端末 ば か り で は あり ませ ん 。 
スマ ー ト フォ ン や ゲー ム 機 な ど に も ブラ ウザ が 用 意 さ れ て いま す 。 開発 に おれ た ら 、 さま 
ざま な 端末 上 の ブラ ウザ も 使い こなし て いく こと が で きる で し ょ よう 。 


JavaScript は 、 大 変 シ ンプ ル で 扱い や すい 言語 で す 。 お 使い の PC に イン スト ー ル され て いる 
エディ タ と ブラ ウザ だ け で 開発 する こと が で きま す 。 

そこ で 試し に 、JavaScript で 簡単 な プロ グラ ム を 作成 し て み ま し ょ う 。 お 使い の PC 上 で エ デ 
ィ タ を 起動 し 、 次 の 文字 を 入力 し て みて くだ さい 。 英字 は 半角 を 使い ます 。 


Sample.html 慎 は じ め て の JavaScript プ ログ ラム 


<!DOCTYPE html> 


<⑪tml langr'ja> 半角 英 数 字 を 使っ て くだ さい 


<head> 
<title> サン プル </title> 
<Script type="text/javascript"> 


0 wlcne0 ーー | スッ > ュ er |] 
window.alert(" よ うこ そ ! ログ イン し て くだ さい 。"): 


) 


</Script> 
</head> 








レル ルコ トミ ざ / だ た さと) 





<body> 
<img src="Sample.jD9′ Onclick= “welcome()"/> 
</body> 
</html> 


この プロ グラ ム の 「window.alert・・・」 の 前 で は 、 行頭 に スペ ー ス を 入れ て 字 下 げ を 


行っ て いま す 。 これ は 、 { } で 囲ま れ た 部 分 を 読み や すく する た め の プ ログ ラム 上 の 工夫 で 
す 。 スペ ー ス キー また は タブ キー を 押す と 字 下 げす る こと が で きま す 。 


入力 が 終わ っ た ら フ ァイル を 保存 し て くだ さい 。 「Sample.html」 と いう 名 前 で 保存 し て み ま 
し ょ う 。 同じ フォ ル ダ に 、 デ ジタル カメ ラ な ど で 撮 影 し た 写真 ファ イル を 、 「SampleJpg」 の ファ 
イル 名 で 保存 し て くだ さい 。 


な お 、 HTML フ ァイル を 保存 する 際 に 文字 コー ド に は 気 を 付け る 必要 が あり ます 。 Web 
で は 、 一 般 的 に は 文字 コー ド と し て 「utf-8」 が 使わ れ ま す 。 た だ し 、 Windows の メモ 帳 
の 標準 設定 で は 「Shift_JIS] で 保存 され ます 。 また 、Web ペー ジ が 文字 化け する 場合 に は 、 
3 行 目 の く <head> の 下 な ど に 、 <meta charset=" お 使い の 文字 コー ド "> と 記述 し て 、 文 
字 コ ー ド を 指定 する 必要 が あり ます 。 utf-8 な ら 、 <meta charset"utf-8"> に な り ま す 。 


また 、 次 の よう な テキ スト ファ イル も 作成 し ます 。 こ の ファ イル の 名 前 は 「Sample.css」 と し 
て くだ さい 。 Web ペ ー ジ の レイ アウ ト を 担当 する ファ イル で す 。 こ の ファ イル も 同じ フォ ル ダ に 
保存 し て くだ さい 。 


Sample.css 諸 Web ペ ー ジ の レイ アウ ト 
body( 


background-color: #89886: Web ペ ー ジ を レイ アウ ト し て いま す 


color: 才 FFFFF: 


し た が っ て 、 次 の 3 つの ファ イル を 作成 する こと に な り ま す 。 


ーV' 灯 で 藩 下 者 羽 | ー] 








還 作 成す る ファ イル 


は じ め て の JavaScript 
プロ グラ ム で す 


-J [し 画 還 


ド た la に htigll ド た ll に 豚 | 1| 


Web ペ ー ジ の Web ペ ー ジ に 表 


示す る 写真 で す 


レイ アウ ト で す 








同じ フォ ル ダ に 保存 し て くだ さい 


「.html や 「.jpgl、「.css]」 の よう に 、 ピリ オド (.) の あと に つけ る 名 前 を 「 拡 張子 」 と 呼 
び ま す 。 一 般 的 に コン ピュ ー タ の 世界 で は 、 フ ァイル の 種類 を 区 別 す る た め に 使わ れ ま 
す 。 「.htmU は 、HTML に よっ て 書か れ た ファ イル で ある こと を あら わし て いる の で す 。 
PC の 設定 に よっ て は 、 拡張 子 を 表示 し な いよ うに な っ て いる 場合 も ちり ます 。 


J 有 。 ニ 

すべ て 作成 し た ら 、Sample.html を あら わす ファ イル の アイ コン を ダブ ルク リッ ク し て みて く 
だ さい 。 ブ ラウ ザ が 起動 し 、Web ペ ー ジ が 表示 され ます 。 

ここ で 画像 を クリ ッ ク し ます 。 す る と 、 次 図 の よう に メッ セー ジ が 表示 され る で し ょ う 。 

いか が で し ょ うか ? 思い どおり に 動い た で し ょ うか 。 

こん な ふう に JavaScript で Web ペ ー ジ を 動か すこ と が で きる の で す 。 ま ず は JavaScript の 
プロ グラ ム を 体験 し て みて くだ さい 。 

















ツー ル を 使っ て みよ う 


時 JavaScript で 動か す 


@ の og9e サン プル 


CTTTETCTTT 症 ロー 
ゃ 5 PO 下 


サン ブル 








⑲ 01/Sample.html 
人 思 寺 
















vaScript 
⑯ よう こそ |! ログ ィ ン し て くだ さい 。 


ーー 


画像 を フク リッ ク し ます メッ セー ジ が 表示 され ます 


Tips 
JavaScript の プロ グラ ム が 実行 され る と き 、 ブ ラウ ザ に よっ て は ユー ザー の 許可 を 


行う 
よう に 設定 され て いる 場合 が あり ます 。 許可 を 行っ て プロ グラ ム を 実行 し て みて くだ さ 
い 。 


ーw' で 洋 昔 午 恒 | = さ 
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JavaScript は 、Web サ イト を 構築 する 際 に よく 利用 され る プロ グラ ミン グ 言 語 で す 。 そ こ で 
この 節 で は 、「Web」 に つい て よく 知っ て お く こ と に し まし ょ う 。 

Web は 最新 の ニュ ー ス を 見 た り 、 キ ー ワ ー ド 検索 を し て 情報 を 調べ た り 、 買い物 を し て 商品 
を カー ト に 入れ た りす る た め に 使わ れ て いま す 。 Web は 私 た ち に と っ て と て も 身近 で 利用 し や 
すい 情報 ツー ル と な っ て いま す 。 

















園 イン ター ネッ ト 

Web は イン ター ネッ ト を 経由 し て 配信 され ます 。 イン ター ネッ ト は 世界 中 の コン ピュ ー タ を 
つなぐ 巨大 な ネッ トワ ー ク で す 。 私 た ち は Web ペ ー ジ を 公開 し た り 、 イ ンタ ーネット に 接続 し て 
Web を 見 た りす る こと が で きま す 。 


恒 世界 に 広がる イン ター ネッ ト 
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較 サー バー 

Web ペ ー ジ を まとめ 、Web サ イト と し て 公開 する コン ピュ ー タ を サー バー と いい ます 。 サー 
バー は 、 ユ ー ザ ー か ら の リク エス ト に 応じ て Web ペ ー ジ の 情報 を 配信 し ます 。 Web サ イト に は 、 
数 多く の ユー ザー が アク セス する こと に な り ま す 。 こ の た め 、 サ ー バ ー に は PC を は じ め 、 処 理 
能力 の 高い コン ピュ ー タ が 使わ れ て いま す 。 


還 Web サ イト を 公開 する サー バー 





サー バー で Web サ イト を 公開 する 場合 に は 、 さまざま な セキ ュ リ ティ 管理 が 必要 で す 。 
サー バー が 別 の 場所 で ほか の 管理 者 に よっ て 管理 され て いる 場合 は 、 FTP な ど と 呼ば れる 
ツー ル を 使っ て 、 必要 な ファ イル を サー バー に 送信 し て か ら Web サ イト を 公開 する 場合 
も あり ます 。 

Web サ ー バ ー の 管理 方 法 や FTP に よる ファ イル の 送信 方 法 に つい て は 、 各種 書籍 ・ ツ ー 
ル の ヘル プ な どの 情報 を 参照 し こく だ さい 。 


圏 クラ イア ント 

Web サ イト を 閲覧 する た め の 端 末 を クラ イア ント と いい ます 。 ク ライ アン ト は 、 ブ ラウ ザ が 動 
作 す る 端末 で あれ ば よい こと に な り ま す 。 

PC や スマ ー ト フォ ン 、 ゲ ー ム 機 な ど 、 ブ ラウ ザ が 動作 する 端末 と し て 、 さ ま ざ ま な クラ イア 
ント が 使わ れ て いま す 。 ま た 、Web サ イト を 見 る ブラ ウザ 自体 を 「 ク ライ アン ト 」 と 呼ぶ 場合 も 
あり ます 。 
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天 Web ペ ー ジ を 閲覧 する た め の ク ライ アン ト 





叶 JavaScript は クラ イア ント で 動く 
と ころ で 、JavaScript で 書か れ た プロ グラ ム を 実行 する の は ブラ ウザ で す 。 つ まり 、Java 
Script の プロ グラ ム は 、 クラ イア ント 上 で 動作 し て いる プロ グラ ム で ある と いう こと に な り ま す 。 
これ は 、JavaScript に よる プロ グラ ム の 動作 を イメ ー ジ する うえ で 、 と て も 大 切な こと で す 。 
お ぼ え て お く と 役に立つ で し ょ う 。 


天 JavaScript は クラ イア ント 上 で 動作 する 


JavaScript 9 み 
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こつ 13 


Web ク ライ アン ト 


“ 


JavaScript は 、 ク フラ イア ント 上 で 動作 する プロ グラ ミン グ 言 語 で す 。 これ に 対し て 、 サー 
バー 上 で 動作 する 代表 的 な 言語 と し て PHP と 呼ば れる 言語 な ど が あり ます 。 どの コン ピ 
ュー タ で プロ グ ブラム が 動作 し て いる の か 、 プ ログ ラム の 動作 環境 を イメ ー ジ する こと は 、 
プロ グラ ミン グ に と っ て と て も 大 切 で す 。 





今度 は 、Web 上 の プロ グラ ム を 構成 する た め に 必要 な ファ イル や 要素 を お さえ て お きま し ょ 
う 。 も っ と も 基本 的 な Web プ ログ ラミ ング の た め の 構 成 要素 は 、 次 の よう に な っ て いま す 。 





w HTML 
w JavaScript 
e CSS 


これ ら は どれ も エディ タ を 起動 し て 文字 の 並び を 入力 し 、 フ ァイル と し て 作成 し て いく こと に 


な り ま す 。 ど の よう な も の か 、1 つ ず つみ て いき まし ょ う 。 
還 HTML 


HTML は Web ペ ー ジ を 書き 表す た め の 言 語 で す 。 < > や </ > と いう 形 を し た タグ と 呼ば れる 
記号 で は さん で 、 ペ ー ジ の 項目 や 内 容 を 入力 ・ 作 成す る こと に な っ て いま す 。 

た と えば 、 タ イト ル は 次 の 図 の よう に <title> て </title> タ グ で は さん で 書き ます 。 は さま れ た 
部 分 が Web ペ ー ジ の タイ トル と な る わけ で す 。 

タグ に は さま れ た 部 分 を 要素 と 呼び ます 。 「title」 要素 は 、Web ペ ー ジ の タイ トル を あら わす 
要素 で す 。 


恒 Web プ ログ ラミ ング に 必要 な 要素 


lesczbt 2 


中 
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第 1 章 | 準備 体操 し よう ! 











昌 HTML の タグ 
<title> や さ し い JavaScript の き ほ ん </title> 
</html> 
HTML 王 還 ke 








要素 の 中 に も 要素 を 書く こと が で きま す 。 た と えば 、 一 番外 側 の 要素 は 、HTML で ある こと 
を あら わす 「htmi」 要素 と し ます 。 こ の 「html 要素 の 中 に 、 タ イト ル と な る 「title」 要素 や 内 容 
と な る 「body」 要素 を 書く こと に な り ま す 。 


HTML の タグ は 、 大 文字 ・ 小 文字 どちら で も か まい ませ ん 。 た だ し 、 現在 で は タグ を 小 文 
字 で 書く こと が 一 般 的 に な っ て いま す 。 


HTML の 要素 < Column 


HTML の 主 な 要素 に は 、 次 の 表 に あげ て いる も の が あり ます 。 この ほか に も Web ペ ー ジ を 記述 す 
る た め に 、 数 多く の 要素 が 用 意 さ れ て いま す 。 


司 HTML の 主 な 要素 
上 際 科 0 
h1~h6 見 出し 
header ヘッ ダ 
footer フッ タ 
article 記事 
section セク ショ ン 
aside 副 次 的 な 内 容 
nav ナビ ゲー ショ ン 
address 連絡 先 
p 段落 
div 範囲 
img 画像 
table 表 
form フォ ー ム 


ファ イル を 用 意 し よう 





骨 JavaScript 

JavaScript は さま ざま な 書き 表し 方 が あり ます 。 そ の うち 、 も っ と も 簡単 な 方 法 と し て 、 
HTML の ファ イル の 中 に 、HTML と 一 緒 に 書い て お く 方 法 が 利用 され て いま す 。 

HTML フ ァイル の 中 で JavaScripth を あら わす に は 、HTML の 「script」 要素 を 使い ます 。 こ の 
タグ に は さん で 、JavaScript の プロ グラ ム を 入力 する の で す 。 


ーJ' で 藩 茹 協 層 | = ュ 





時 JavaScript は HTML フ ァイル の 中 で 「script」 要素 に 囲ん で 記述 する 


<SCr1Dt> 
6 
</sCcript> ブロ グラ ム で す 








JavaScript の 入力 場所 < Column 


JavaScript を あら わす 「script] 要素 は 、 HTML 中 の さま ざま な 場所 に 書く こと が で きま す () 。 

HTM 文書 中 の 「head] 要素 内 (@) の ほか 、 「body] 要素 内 (@) や 、 HTML ファ イル と は 別 の フ 
ァイル (拡張 子 は 「.js] ) と し て 作成 し て お く こ と も で きま す 。 な お 、 先ほど の 1-2 節 の 例 で は 、 
「head] 要素 の 内 部 に 書き まし た (@ の 例 ) 。 


<html> <html> 


<html> 


</script> 
</head> 


</html> 
</html> 














較 CSS 


も う 1 つ 、Web ペ ー ジ を 作成 する 際 に 重要 な 要素 が CSS (カス ケー ディ ング スタ イル シー ト ) 
で す 。 CSS は Web ペ ー ジ の デザ イン や レイ アウ ト を 決め る た め に 使わ れる ファ イル で 、 単 純 に 
スタ イル シー ト と も 呼ば れ て いま す 。 通常 、HTML と は 別 の ファ イル と し て 作成 し 、HTML ファ 
イル の 中 に CSS ファ イル の 名 前 と 場所 を 指定 し ます 。 


時 デザ イン ・ レ イア ウト を 受け も つ CSS フ ァイル は HTML と は 別 フ ァイル に する 





Eo body{ 
back9round-color: 寺 FFFF6: 
) 


h1{ 
backqground-color: EC3333: 
) 


SA h2{ 
background-color: 扱 3AA68: 
) 











CSS で は 次 の よう な 形 で レイ アウ ト を 指定 し ます 。 





セレ クタ {プロ パテ ィ : 休 


セレ クタ は 、HTML 文書 中 の 要素 な ど を あら わし ます 。 プロ パテ ィ は 、 そ の 要素 の 色 や フォ ン 
ト な どの 属性 で す 。 HTML 文書 中 の 要素 の 色 や フォ ント な どの 値 を 指定 し て 、 レ イア ウト を 作成 
する の で す 。 た と えば 、 次 の 指定 は 「body」 要素 の 背景 色 を 指定 する も の で す 。 


呈 ス タイ ル シ ー ト の 指定 方 法 


body( 
background-color: 寺 FFFFB: 


「body] 要素 の 背景 色 を 白 に し ます 








) 











1-4 | ファ イル を 用 意 し よう 


ファ イル の 場所 を 指定 する に は < Colurmmn 


この ほか に も Web サ イト の 構築 に お た っ て は 、 画像 ファ イル や 音声 ・ 動 画 フ ァイル な ど を 準備 す 
る 必要 が あり ます 。 HTML や JavaScript の 中 で は 、 こ れ ら の ファ イル の 場所 を 指定 する こと が あり 
ます 。 

ファ イル の 場所 を 指定 する に は 、URL と いう 書き 方 を 使い ます 。 そこ で 、 URL の 書き 方 に つい て 
少し 紹介 し て お きま し ょ う 。 

URL に は 、 ど こ か ら で も 同じ よう に あら わす 方 法 (の ) と 、 指定 する HTML フ ァイル の 場所 か ら 指 
定 す る 方 法 (@) が あり ます 。 

た と えば 、 図 中 の よう に pic フォ ル ダ に 保存 し た 画像 ファ イル に つい て 考え て み ま し ょ う 。 この 画 
像 を Sample.html 中 で 指定 する に は 、 ゆ の 方 法 で は 「http://sbcr.jp/doc/pic/pic.jpg] と 指定 し 
ます 。 また 、 @ の 方 法 で は 、 HTML の 場所 か ら た どっ て 「pic/pic.jpgl と 指定 し ます 。 

な お 、 先ほど の 1-2 節 の よう に 同じ フォ ル ダ 内 に 保存 し た ファ イル に つい て は 、 フ ァイル 名 だ け で 
指定 で きま す 。 

こう し た ファ イル の 指定 方 法 に つい て お ぼ え て お く と 便利 で し ょ う 。 


ea | 」 GTmrey 
| : 
| し se 、 
| 較 昌 … | |esms 
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第 2 草 
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は じ め よ う ! 


EN に Telgleo)2 コ ドッ レビ 晶 りり / コ 
FE の 7/ ツ 】 加 に 間 間 EV だ た に 1elglo) 
必要 が あり ます 。 こ の 章 で 
し て いく た め の 知 識 を 学び 


b ペ ー ジ を 動か し て いく こと が で きま す 。 

で プロ グラ ム を 書く た め の 基 本 を 身 に つけ る 
よ は 、JavaScript を 使っ て Web ペ ー ジ を 作成 
た し よう 。 











チャ レン ジ !| 時 刻 を 調べ よう 


この 章 で は 、JavaScript の 中 で 、 も っ と も 基本 と な る 事柄 に つい て 学ん で いき まし ょ う 。 
この 節 で は 、JavaScript を 使い 、 ユー ザー が Web ペ ー ジ を 開い た 「 時 刻 」 を 表示 し て みる 
0 
ー 


通常 、HTML の 機能 を 使う っ だけ で は 、 ユ ー ザ ー が Web ペ ー ジ を 開い た 時 刻 を Web ペ ー 
ジ に 表示 する こと は で きま せん 。 も と も と HTML は 、Web ペ ー ジ に 表示 する 内 容 を あら か 
じ め 書 き あ ら わ す た め だ け に 使わ れ て きた 技術 だ か ら で す 。 

けれ ども JavaScript の 機能 を 使え ば 、 Web ペ ー ジ に 高度 な 機能 を 付け 加え る こと が で き 
ます 。 ユー ザー が Web ペ ー ジ を 開い た 時 点 の 時 刻 を 表示 する こと が で きる の で す 。 


司 Web ペ ー ジ を 開い た 時 刻 を 知る 


9 
oeEN/ = 2014/01/01 12:05 


| き 日 | 時 刻 が 表示 され る 
] の | よう に し ます 
| | 


包 二 ーー 


それ で は 、 時 刻 を 表示 する プロ グラ ム を 作成 し て み ま し ょ う 。 プ ログ ラム を 次 の よう に 入力 
し て いき ます 。 エ ディ タ を 起動 し 、HTML ファ イル を 作成 し ます 。 <script> て </scrip セ タグ の 間 
に JavaScript の プロ グラ ム を 入力 し て みて くだ さい 。 プ ログ ラミ ング の 世界 で は 、 こ うし た 入 
カプ ログ ラム を コー ド と 呼ぶ 場合 が あり ます 。 
































Sample2-1-1.html 計時 刻 を 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSS"> 
<title> サン プル </title> 

</head> 

<body> 

<SCript type="text/javascript"> 


var d = new Date(): 時 刻 を 調べ ます 
document.writeln(d): し mvas | 
</script> 時 刻 を 表示 し ます 


</body> 
</html> 


な お 、 こ の 章 で は 次 の スタ イル シー ト を 使い ます 。 次 の CSS フ ァイル を 作成 し 、HTML フ ァ イ 
ル と 同じ フォ ル ダ 内 に 保存 し て お いて くだ さい 。 


Sample.css 上 秘 スタ イル シー ト 


body( 
background-color: #B9888: 
color: 才 FFFFF: 
font-size: 2em: 
font-family: fantasyi 
#on{ 
background-color: #2e8D57: 
color: 才 FFFF9: 
font-family: fantasyj 
#off( 
backqround-color: 8888: 
color: 寺 FFFFB: 
font-family: fantasyi 


さて 、 作 成 し た HTML 文書 を ダブ ルク リッ ク し て 開く と 、 次 の よう な Web ペ ー ジ が 表示 され 
ます 。 ペ ー ジ を 開い た 時 刻 が 、Web ペ ー ジ に 埋め 込ま れ て 表示 され て いる の が わか る こと で し 


よう 。 
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恒 Sample2-1-1 の 表示 


@eo@ サン プル aa 
9 02/Sample2-1-1.html _- と 








Fn Jan O う 2OI す OO:2O:22. 
GMT+O9OO (JST) 


回 生 に 和 理 江 條 EK 
「script」 要素 を 使っ て JavaScript の コー ド を 記述 する と 、Web ペ ー ジ を 開い た と き に 、 
「script」 要素 内 の 処理 が 順番 に 処理 され る よう に な っ て いま す 。 
JavaScript で は 、 処 理 の 単位 を 文 と 呼ん で いま す 。 文 の 末尾 に は : (セミ コロ ン ) を つけ ます 。 
つま り 、 こ こ で は <script> で て </script> に 囲ま れ た 、 次 の 3 文 の 処理 が 順番 に 行わ れる わけ で す 。 








<script type="text/javascript"> 


Var 中 
d = new Date(): 順番 に 処理 され ます 


document.writeln(d): 
</Script> 


Ns こい | 


それ で は 、 こ の JavaScript で は 一 体 ど ん な 処理 を し て いる の で し ょ うか ? ここ で 少し みて 
お く こ と に し まし ょ よう 。 

JavaScript で は 、 オ プ ジ ェ クト と いう も の を 作成 し て 利用 し ます 。 オブ ジェ クト は 、 次 の よう 
な 順 で 利用 する こと に な っ て いま す 。 次 の 手順 を 、 順 番 を 追っ て みて いき まし ょ う 。 


の : を. に 
と アム ジニ コン さわ ) オブ ジェ クト を オブ ジェ クト を 


変数 を 用 意 する 作成 する EE) 








較 オブ ジェ フト を 扱う 変数 を 用 意 する 


JavaScript で は オブ ジェ クト を 扱う た め に 、 ま すず 変数 と よ ば れる し くみ を 用 意 し ます 。 変数 
は プロ グラ ミン グ 言 語 で よく 使わ れる し くみ で す 。 次 の よう に 変数 の 名 前 を 用 意 し て 使い ます 。 





ここ で は 、 次 の よう に 変数 の 名 前 を 用 意 し て いる の で す 。 
Var dj d と いう 名 前 の 変数 を 用 意 し て いま す 


var で 変数 を 準備 する こと を 示し ます 。 d は 自分 で 用 意 す る 変数 の 名 前 な の で 、 原 則 と し て 適 
当 な 文字 列 を 使っ て か まい ませ ん 。 こ こ で は 、 日 時 で ある こと を あら わす た め に d と いう 名 前 に 
し て み ま し た 。 変数 を 準備 する イメ ー ジ を つか ん で みて くだ さい 。 














還 変数 を 準備 する 





Tip ら 
変数 の 名 前 に は 、 次 の よう な 文字 を 使っ て くだ さい 。 


mm 文字 ・ 数 字 ・ ア ンダ ー ス コア な ご ど を 用 いま す 。 

還 数 字 で は じ め る こと は で きま せん 。 

m 大 文字 と 小文字 は 異な る も の と し て 区 別 さ れ ま す 。 

mm あらかじめ JavaScript が 予約 し て いる 「 キ ー ワ ー ド 」 を 使用 する こと は で きま せん 。 
主 な キー ワー ド と し て 、var や function が あり ます 。 

旨 長 さ に は 制限 が あり ませ ん 。 


た と えば 、「al や 「abc] な ど を 使う こと が で きる で し ょ う 。 数 字 で は じ ま る 「123a」 な 
ど は 使う こと が で きま せん 。 
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還 オブ ジェ クト を 作成 する 


次 に オブ ジェ クト を 作成 し ます 。 オ ブ ジ ェクト は 、 new と いう キー ワー ド で 作成 し ます 。 new 
は 「『 新 し く 』 作成 する 」 と いう 意味 で す の で 、 わ か りや すい こと で し ょ う 。 

オブ ジェ クト は 、 プ ログ ラム に 必要 な デー タ や 機能 を まとめ た も の で す 。 こ こ で は 、 日付 に 関 
する 機能 を まとめ た 、Date オ ブ ジ ェクト と いう 種類 の オブ ジェ クト を 作成 し て いま す 。 

オブ ジェ クト を 作成 し た ら 、 ニ と いう 記号 を 使っ て 、 変 数 の 名 前 に 設定 し ます 。 


Date オ ブ ジ ェクト を 作成 し て … 


d = new Date(): 


変数 d に 設定 し ます 


これ で 、d と いう 変数 の 名 前 で 作成 し た オブ ジェ クト を 扱う こと が で きる よう に な り ま す 。 
つま り 、 次 の よう に し て オブ ジェ クト を 作成 し た わけ で す 。 





還 オ ブ ジ ェクト を 作成 する 





に を II に だ さと 】 


TiP ら 
これ まで 行っ た 変数 の 準備 と オブ ジェ クト の 作成 は 、 次 の よう に まとめ て 簡単 に 書く こと 
も で きま す 。 


var d = new Date(): 


これ で 作成 し た Date オ ブ ジ ェクト を 、 変数 d で すぐ に 扱う こと が で きる よう に な り ま す 。 
本 書 で は これ か ら 、 この 記述 方 法 を 使っ て いく こと に し まし ょ う 。 


還 オブ ジェ フト を 利用 する 


オブ ジェ クト を 作成 し た ら 、 最 後に 変数 を 指定 し て オブ ジェ クト を 利用 し ます 。 ここ で は 、 ( ) 
の 中 に オブ ジェ クト を 扱っ て いる 変数 を 指定 する こと で 、 日 時 を 表示 し て いま す 。 こ れ で オブ ジ 
ェクト を 利用 する こと が で きま し た 。 


document.writeln(d): 時 刻 を 表示 し ます 





居 オ ブ ジ ェクト を 利用 する 





オブ ジェ クト は 、 デー タ と 機能 を まとめ た も の と な っ て いま す 。 つま り Date オ ブ ジ ェ ク 
ト は 、 日 時 デー タ と その デー タ を 調べ た り 設 定 し た りす る 機能 を まとめ た も の で す 。 日 時 
オブ ジェ クト を 利用 する こと で 、 日 時 を 調べ る こと が で きる わけ で す 。 オブ ジェ クト の 利 
用 方 法 に つい て は 、 これ か ら 少 し ずつ みて いき まし ょ う 。 
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第 2 章 REN だ に (dg) コト 3 バッ チャン は 





さて 、 オ ブ ジ ェクト を 利用 する た め の 3 つ の 手順 を 理解 する こと が で きた で し ょ うか ? も う 
一 度 3 つ の 手順 を ふり か えっ て みて お いて くだ さい 。 





届 オ ブ ジ ェクト を 利用 する 手順 


変数 を 準備 し ます 
W 


^ 
4 人 


d d 


人 ーー) mm 


オブ ジェ クト を 


利用 し ます 





s Dote 


BT 





オブ ジェ クト の 種類 < Colurmn 


JavaScript に は 、 Date オ ブ ジ ェクト の ほか に も 、 次 の よう な 基本 の オブ ジェ クト が 用 意 さ れ て い 
ます 。 さま ざま な オブ ジェ クト が あり 、 利用 する こと が で きま す 。 

また 、 プロ グラ ム 上 よく 使わ れる 機能 を 、 新しい オブ ジェ クト と し て まとめ て 設計 する こと も で き 
ます 。 高度 な 利用 方 法 も 可能 と な っ て いる の で す 。 





画 オ ブ ジ ェクト 
オブ ジェ クト の 種類 説明 
Object オ ブ ジ ェクト オプ ジェ クト に 関す る 機能 
Array オ ブ ジ ェクト 配列 に 関す る 機能 
Boolean オ プ ジ ェ クト 真 偽 に 関す る 機能 
Error オ プ ジ ェ クト エラ ー に 関す る 機能 
Event オ ブ ジ ェクト イベ ント に 関す る 機能 
Date オ ブ ジ ェクト 日 付 に 関す る 機能 
Function オ ブ ジ ェクト 関数 に 関す る 機能 
Math オ ブ ジ ェクト 数 学 に 関す る 機能 
Number オ プ ジ ェ クト 数 値 に 関す る 機能 
RegExp オ プ ジ ェ クト 正規 表現 に 関す る 機能 
String オ ブ ジ ェクト 文字 列 に 関す る 機能 











オブ ジェ クト を 使い こ な そう 


オブ ジェ クト は 便利 な も の で す 。 オブ ジェ クト に は 、 デー タ や 機能 が まとめ られ て いま す 。 
前 の 節 で 使っ た Date オ ブ ジ ェクト の 場合 は 、 日 時 デー タ と その デー タ を 調べ た り 設 定 し た 
りす る 便利 な 機能 が まとめ られ て いま す 。 そ こ で この 節 で は 、 オ ブ ジ ェクト を も っ と 活用 し 
て みる こと に し まし ょ う 。 


馬 オ ブ ジ ェクト の 機能 





sy らち ヒ = っ 


オブ ジェ クト に まとめ られ て いる デー タ は 、 プ ロ パ ティ と 呼ば れ て いま す 。 ま た 、 オ ブ ジ ェ ク 
ト に まとめ られ た 機能 は ま 、 メ ソ ッ ド と よ ば れ て いま す 。 プ ロ パ ティ と メソ ッ ド は 、 ま と め て メン 
バ と 呼ば れる こと も あり ます 。 

た と えば 、Date オブ ジェ クト に は 、 主 な も の と し て 次 の メン バ が あり ます 。 日 時 に 関す る さま 
ざま な 機能 を 、 メ ン バ と し て 利用 する こと が で きる の で す 。 
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第 2 章 | JavaScript を は じ め よ う ! 


是 Date オ ブ ジ ェクト の 主 な メン バ 


getFullYear() 年 を 取得 する 
getMonth() 月 を 取得 する 
getDate() 日 を 取得 する 
getDay0) 曜日 を 取得 する 
getHours() 時 を 取得 する 
getMinutes() 分 を 取得 する 
getSeconds() 秒 を 取得 する 
getMilliseconds() ミリ 秒 を 取得 する 
setFullYear(year) 年 を 設定 する 
setMonth(month) 月 を 設定 する 
setDate(date) 日 を 設定 する 
setDay(day) 曜日 を 設定 する 
setHours(hour) 時 を 設定 する 
setMinutes(min) 分 を 設定 する 
setSeconds(sec) 秒 を 設定 する 
setMilliseconds(msec) ミリ 秒 を 設定 する 
toDateString() 日 付 文 字 列 を 取得 する 
toTimeString() 時 刻 文字 列 を 取得 する 
toLocaleDateString() ロー カル 日 付 文字 列 を 取得 する 
toLocaleTimeString() ロー カル 時 刻 文 字 列 を 取得 する 
toString() 文字 列 を 取得 する 


日 付 に 関す る さま ざま な 情報 を 得る こと が で きる で し ょ う 。 オブ ジェ クト の メン バ は 、 次 の よ 
うな JavaScript の コー ド を 入力 する こと で 利用 で きる よう に な っ て いま す 。 


構文 | オプ ジェ クト の メン バ 


ゃ デー タ (プロ パテ ィ ) の 場合 


オブ ジェ クト . プロ パテ ィ オブ ジェ クト の デー タ を 利用 し ます 


e 機能 (メソ ッ ド ) の 場合 


オブ ジェ クト . メソ ッ ド () オブ ジェ クト の 機能 を 利用 し ます 


た と えば 、 オ ブ ジ ェクト を d と いう 変数 で 取り 扱っ て いる 際 に 、「 年 」 を 調べ る 機能 (getFull 
Year()) を 利用 する に は 、 次 の よう な コー ド を 作成 する わけ で す 。 


d.getFullYear(): 年 を 調べ る 機能 を 利用 で きま す 











2-2 | オブ ジェ クト を 使い こ な そ う 


Tip ら 


メソ ッ ド は 「 メ ソ ッ ド 名 0」 と いう よう に ( ) を つけ て 使い ます 。 ここ で は ( ) の 中 に は 何 も 
指定 し て いま せん が 、( ) の 中 に は 機能 の た め に 必要 な 情報 を 指定 する こと が あり ます 。 

た と えば 、 日 付 を 表示 する 際 に 使っ た document.writeln() は 、 Document オ ブ ジ ェクト 
の writeln() メソッド で す 。 document.writeln(" 文字 列 ") と いう 形式 で 使っ て いま す 。( ) 
内 に 表示 する 文字 列 情 報 を 指定 し て いる わけ で す 。 





応用 ! さま ざま お な 日 時 を 表示 し て みよ う 


それ で は 、Date オ ブ ジ ェクト の 機能 を 使っ て 、 さ ま ざ ま な 日 時 を 表示 し て み ま し ょ う 。 Date 
オブ ジェ クト を 使う と 、「 年 」「 月 」「 日 」 な ど を 取り 出し て 、Web ペ ー ジ に 表示 で きま す 。 こ こ で 
は 、2-1 節 の Sample2-1-1.html の JavaScript の 部 分 を 変更 し て 、 さ ま ざ ま お な 日 時 表示 を し て 
いき ます 。 




















昌 年 を 表示 する 


年 を 調べ る に は getFullYear() メソ ッ ド を 使い ます 。 調べ た 年 に 、「 今 年 は 」「 年 」 と いう 文字 列 
を 付け 加え て み ま し た 。 


Sample2-2-1.html 牙 年 を 調べ る 


<Script type="text/javascript"> 

var d = new Date(): 

var y = d.getFullYear(): 
document.writeln(" 今 年 に"+y+『 年 り ): 


</Script> 
文字 列 を 付け 加え まし た 


上 Sample2-2-1 の 表示 


@966 
| @ 02/samplez-2-1.html 
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第 2 章 | JavaScript を は じ め よ う ! 





還 月 ・ 日 を 表示 する 


「 月 」 を 調べ る に は getMonth() メソ ッ ド 、「 日 」 を 調べ る に は getDate() メソ ッ ド を 使い ます 。 
「 今 日 は 」「 月 」「 日 」 の 文字 列 を 付け 加え て いま す 。 
































Sample2-2-2.html 罰 月 日 を 調べ る 


<Script type="text/javascript"> 


var d = new Date(): [月 |」 を 調べ ます 
var mt = d.getMonth() + 1: 
var dt = d.getDate(): 「 日 ] を 調べ ます 


document.writeln(" 今 日 は "+mt+ "月 "+dt+ リ 日 り ): 
</script> 


居 Sample2-2-2 の 表示 


@6@G6@ サン ブル ー 


人 ⑲9 02/Sample2-2-2.html c | っ |O」> 
sem 





今日 は 8 月 日 


月 の 値 は 、0 か ら は じ ま り 1 1 で お わり ます 。 つま り 、 最初 の 1 月 が 0、 2 月 が 1 と な り 、12 
月 は 11 と な り ま す 。 この た め 、 上 の プロ グラ ミン グ で は 1 と し て いる こと に 注意 し て く 
だ さい 。 


画 時 刻 を 表示 する 


「 時 」 を 調べ る に は getHours() メソ ッ ド 、「 分 」 を 調べ る に は getMinutes() メソ ッ ド を 使い ま 
す 。 時 刻 を 調べ る 方 法 も 同じ よう に 使え る こと が わか る で し ょ う 。 





Sample2-2-3.html 某 時 刻 を 調べ る 


<SCript type="text/javascript"> 





2-2 | オブ ジェ クト を 使い こ な 


var d = new Date(): 


var h = d.getHours(): [時 」 を 調べ ます 
Var m = d.getMinutes(): 
「 分 ] を 調べ ます 


document.writeln(" 今 "+ ェ h+ "時 "+ ォ m+ "分 "): 
</Script> 





天 Sample2-2-3 の 表示 


@99 サン ブル ] 
⑲ 02/Sample2-2-3.html [の 1O > 
ee 還 束 


今時 2O 分 





プロ グラ ム は 、 コン ピュ ー タ に 理解 させ る た め の 言 語 で すか ら 、 人 間 に と っ て は 内 容 が わか り に く 
いと き が あり ます 。 あと か ら 読 み 返し た と き に 内 容 が わか ら な く な ら な いよ うに 、 プ ログ ラム の 中 
に 日 本 語 で メモ を 書い て お く こ と が で きま す 。 

// の あと に 続け て メモ を 入力 し ます 。 コン ピュ ー タ は 、 // の 行 を コン ピュ ー タ へ の 指示 と は みな 
さ な い た め 、 メモ を 入力 し て お く こ と が で きる の で す 。 これ を コメ ント と いい ます 。 


<SCript type="text/javascript"> 
// 日 付 を 表示 する コメ ント を 入力 し て み ま し た 
var d = new Date(): 





テク ニッ ク を 学 ぼ う 
































いか が で し ょ うか 。 日 時 を 表示 する こと が で きた で し ょ うか ? ここ で 紹介 し た プロ グラ ム で 
し く 


は 、 少 し 高度 な テク ニッ ク を 使っ て いま す 。 サン プル で 使っ た テク ニッ ク に つい て 、 も う 少 
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第 2 章 JavaScript を は じ め よ う ! 


わし く 解 説 し て で おき ましょ う 。 Sample2-2-3.html の 次 の 2 行 で 解説 し て いき ます 。 


var m = d.getMinutes(): 
document.writeln(" 今 "+ ェ h+ "時 "+m+ リ 分 "): 


還 値 を 記憶 する 


Date オ ブ ジ ェクト を 利用 すれ ば 、 日 時 な ど を 調べ る こと が で きま す 。 こ の と き 調 べた 値 は 、 
まず コン ピュ ー タ 内 の 領域 に 記憶 し て お か な けれ ば な り ま せん 。 こ の た め に は 、 前 の 人 節 で も 紹介 
し た 「 変 数 」 を 使い ます 。 

変数 は var で 名 前 を 準備 する の で し た 。 準備 し た ら 、 を 使っ て 右辺 の 値 を 左辺 に 設定 (記憶 ) 
する こと が で きま す 。 つ まり 、 次 の 指定 で 、 変 数 min に 「 分 」 を 記憶 する こと が で きま す 。 「 年 」 
「 月 」「 日 」「 時 」 な ど 、 ほ か の 情報 も この 方 法 で 記憶 し 、 表 示し て いま す 。 


Var min = d.getMinutes(): 変数 min に 「 分 」 を 記憶 し ます 


= と いう 記号 は 、 = の 左 の 変数 に 右 の 値 を 記憶 させ る た め に 使わ れ ま す 。 
「 変 数 = new オ ブ ジ ェクト ( ):]」 の 場合 は 、 作成 し た オブ ジェ クト の 場所 を 記憶 させ て い 
る の で す 。 一 般 的 に 使わ れる 「 〇 と X が 等 し い ] と いう 意味 と は 少し 違う の で 注意 し て く 


だ さい 。 な お 、 一 度 記憶 し た 後に もう一度 = を 使っ て 設定 する と 、 変数 の 値 は 上 書き さ 
れ て 変更 され ます 。 


下 文字 列 は " "で 囲う 


記憶 し た 値 は 、Document オ プ ジ ェ クト の writelIn() メソ ッ ド を 使っ て Web ペー ジ に 表示 し て 
いま す 。 こ こ で は 、 ペ ー ジ 上 に 表示 する と き に 、 「 今 」 や 「 時 」「 分 」 な どの 文字 列 を 付け 加え て 表 
示す る こと に し まし た 。 こ の よう に あら か じ め 決 まっ て いる 文字 列 は 、" "また は ' ' で 囲う こと 
に な っ て いま す 。 

な お 、 変 数 は " "や '' で は 囲み ませ ん の で 注意 し て くだ さい 。 


文字 列 を " "で 囲み ます 


document.writeln(" 今 "+hour+ "時 "+min+ "分 "): 








2-2 | オブ ジェ クト を 使い こ な そ う 





TiP ら 


「"] は ダブ ルク フォー テー ショ ン 、 「'] は シン ブル フォ ー テ ーション と 呼び ます 。 JavaScript 
の 文字 列 は 、 ど ちら の 記号 を 使っ て あら わし て も か まい ませ ん 。 た だ し 、" で 始ま っ た 場 
合 は "で 閉じ 、' で 始ま っ た 場合 は "で 閉じ る 必要 が あり ます 。 記号 が 対応 し て いな けれ ば 
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な ら な い の で す 。 
明 変数 と 文字 列 を + で つなぐ 
変数 と 文字 列 は 、 十 で つなぎ ます 。 つ けた す 文 字 列 を 工夫 すれ ば 、 さ ま ざ ま な メッ セー ジ を 
表示 する こと が で きる で し ょ う 。 い ろ い ろ な Web ペ ー ジ を 作成 し て みて くだ さい 。 
Document オ ブ ジ ェクト < Column 
ここ で は 、 Document オ ブ ジ ェクト の writeln() メ ソ ッ ド を 使っ て 、 Web ペ ー ジ に 日 時 を 埋め 込 
ん で きま し た 。 


Document オ ブ ジ ェクト は new を 使わ ず に 、「document]」 と いう 決ま っ た 名 前 の 変数 で 扱う こ 
と が で きる 特別 な オブ ジェ クト で す 。 document は Web ペ ー ジ を あら わす 特別 な オブ ジェ クト と な 
っ て いま す 。 この た め 「document.writeln( 表 示し た い 文字 列 ):|] と いう 指定 で Web ペ ー ジ に メッ 
セー ジ を 埋め 込む お こと が で き て いる の で す 。 

Document オ ブ ジ ェクト の デー タ と 機能 は 、 writeln()) メ ソ ッ ド の ほか に も 、 次 の も の な ど が あり 
ます 。 


情 Document オ ブ ジ ェクト の メン バ 


clear() 文書 内 容 を クリ ア す る 
open() 文書 出力 を 開始 する 
close() 文書 出力 を 終了 する 
write() 文書 に 出力 する 
writeln() 文書 に 出力 ・ 改 行 する 
getSelection() 選択 文字 列 を 取得 する 
cookie クッ キー の 値 

domain 文書 の ドメイン 
lastModified 文書 の 最終 更新 日 
referrer リン ク 元 URL 

title タイ トル 

location 文書 の URL 

URL 文書 の URL 





状況 に 応じ た 処理 を し よう 








今度 は 日 時 を 調べ て 、 平日 ・ 休 日 に 対応 する 画像 を Web ペ ー ジ に 表示 する こと を 考え て 
み ま し ょ う 。 平日 と 休日 に 分 け て 、 次 の よう な 名 前 の 画像 を 2 つ 用 意 し て み ま し た 。 こ の 場 
合 、 日 時 に よっ て 違う 画像 を 表示 する 必要 が ある で し ょ う 。 そ の よう な ペー ジ に は 、 ど の よ 
うに プロ グラ ム を 作成 すれ ば よい で し ょ うか ? 


恒平 日 の 「wday.jpg」 時 休日 の 「hday.jpg」 
と っ 


ーー * ヽ モー ー 王 


1F フ 























日 時 に 応じ て 違う 画像 を 表示 する に は 、 平 日 と 日 曜日 に よっ て 場合 分 け を し 、 そ れ ぞ れ の 場 
合 に 応じ た 画像 を 表示 する 処理 を し ます 。 Date オ ブ ジ ェクト の getDay() メソ ッ ド を 使う と 、 曜 
日 を 調べ る こと が で きま す 。 日 曜日 で あれ ば 0、 月 曜日 で あれ ば 1 と いう よう に 、0~6 の 値 と 
し て 得る こと が で きま す 。 




















Sample2-3-1.html 押 場合 分 け を する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet' href="Sample.CSS"> 
<title> サ ンプ ル </title> 

</head> 





<body> 


<Script type="text/javascript"> 
間 曜日 を 調べ ます 
var d = new Date(): 
var day = d.getDay() 日 曜日 で あれ ば ・・・ 
if(day == 8){ 
document.writeln('<img src="hday.jpg">「): 休日 の 画像 を 表示 し ます 
) 


elset それ 以外 で あれ ば ・・・ 
document.writeln('<img src="wday.jpg'> 「): 





| の 画 人 を 表示 し ます 
画 示 
script> 平日 の 画像 を 表示 し ます 


</body> 
</html> 


居 Sample2-3-1 の 表示 (平日 の 場合 ) 


@@69 サン ブル 
⑲ 02/Sample2-3-1.html ン 1O」> 
| - | 
|e3 思 加 


平日 の 画像 を 表示 し ます 





呈 Sample2-3-1 の 表示 (日 曜日 の 場合 ) 


@@6 69 サン ブル 
旧 ⑲ 02/Sample2-3-1.html ン G |> 
| eS 思 峰 
サン ブル 


休日 の 画像 を 表示 し ます 
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ジーコ 二 


ここ で は JavaScript を 使っ て 、 次 の よう な 内 容 の 処理 を 書い て いま す 。 


1f( 日 付 が 日 曜日 で ある )( ーー 
人 昌 の 凍 き 示す ある 。。 し きけ を し まず | 
elset 
それ 以外 の 画像 を 表示 する 


も し 、 日 付 が 日 曜日 だ っ た ら 休日 の 画像 を 、 そ う で な い 場 合 に は 平日 の 画像 を 表示 する よう 
に し て いる の で す 。 

日 曜日 の 場合 は 、if の 後 の { } で 囲ま れ た 部 分 の 処理 が 行わ れ ま す 。 else の あと の { ] の 処理 は 
行わ れ ま せん 。 ま た 、 日 曜日 以外 の 場合 は 、else の あと の { ] 内 の 処理 が 行わ れ 、if の あと の { } 
で 囲ま れ た 部 分 の 処理 は 行わ れ ま せん 。 曜 日 に よっ て 異な る 画像 が 表示 され る よう に 、 場 合 分 
け を し て いる の で す 。 

こん な ふう に 、JavaScript で は 、 if>else と いう 文 を 使う と 状況 に 応じ て 違う 処理 を する こ 
と が で きま す 。 


_ 構文 | if-else 文 





これ で 、Web ペ ー ジ を 開い た 曜日 に 応じ て 、 別 の 画像 を 表示 する 処理 が で きる よう に な る の 
195a 


Tips 


{ ! 内 に は 複数 の 文 を 入力 で きる の で 、 複雑 な 処理 も で きる で し ょ う 。 な お 、 { 内 の 処理 が 
1 つの 文 で あめ る と き に は 、 {を 省略 する こと も で きま す 。 


状況 に 応じ た 処理 を し よう 





JavaScript の 場合 分 け の 方 法 に は 、 い くつ か の 種類 が あり ます 。 場合 分 け の バリ エー ショ ン 


を 紹介 し まし ょ う 。 


請 場 合 分 け の バリ エー ショ ン 


he:3 
if( 条 件 )( 

条件 の が 成り 立つ 場合 の 処理 
1 








if( 条件 人 @ )( 
条件 人 が 成り 立つ 場合 の 処理 
) 
elsef 
条件 ⑳ が 成り 立た な い の 場 合 の 処理 








ぜ ー else if 一 else 文 
if( 条 件 人 @ ){ 
条件 ⑳ が 成り 立つ 場合 の 処理 
) 
else if( 条 件 @ ){ 
条件 伯 が 成り 立た ず 条 件 @ が 成り 立つ 場合 の 処理 


elset 
すべ て の 条件 が 成り 立た な い 場 合 の 処理 
} 


ーー さき 選 下 人 R1dHOSBABT | N》 











EN だ に Idgl yk コト ザン ッ た さと | 


switch 変数 
CaSe  : 変数 が 失 の 場合 の 処理 
break: 
Case @ : 変数 が @ の 場合 の 処理 
break: 
default: 
変数 が 鈴 、@… で は な い 場 合 の 処理 








応用 ! 日 時 に よっ て 違う 処理 を する 


バリ エー ショ ン に 富ん だ 場合 分 け を 使い こなす と 、 状 況 に 応じ て きめ 細か い 処 理 を 行っ た 
Web ペ ー ジ を 表示 する こと が で きま す 。 そこで 、 こ こ で 紹介 し た 場合 分 け の 処理 を 使っ て 、 実 
際 に いろ いろ な プロ グラ ム を 作成 し て み ま し ょ う 。 


明 午前 と 午後 で 場合 分 け す る 
ユー ザー が Web ペ ー ジ を 開い た 時 刻 が 、 午 前 で ある か 午後 で ある か に よっ て 違う 処理 を する 
こと に し ます 。 こ こ で は 、 そ れ ぞ れ 「AM」「PM」 と 表示 を 分 け て み ま し ょ う 。 


Sample2-3-2.html 盾 午前 ・ 午 後 で 場合 分 け す る 


<script type="text/javascript"> 
var d = new Date(): 
var h = d.getHours(): 


if(h <= 12)( 
document.writeln("AM"): 
elset 


document.writeln("PM"): 午後 の 場合 の 処理 で す 


) 


</script> 








エコ さと 】 





時 Sample2-3-2 の 表示 


@966G サン ブル 記 
中 ⑲ 02/Samplez-3-2.html で | @」>| 
eS 計 







@966 
内 02/Sample2-3-2.html 


サン ブル 
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午前 の 場合 の 表示 で す 


午後 の 場合 の 表示 で す 











呈 土日 と 平日 で 場合 分 け す る 
ユー ザー が Web ペ ー ジ を 開い た 時 刻 が 、 土 日 で ある か 平日 で ある か に よっ て 違う 処理 を する 




















こと に し ます 。 switch 文 を 使う と 、case の あと に 指定 し た 変数 の 値 に よっ て 、 異 な る 処理 が で 
きま す 。 変数 の 値 に よっ て case か ら break: ま で の 処理 が 行わ れる の で す 。 
ここ で は 、 土曜 (case 6:) と 日 曜 (case 0:) に つい て は 同じ 処理 を し て いま す 。 


























Sample2-3-3.html 置 平日 ・ 休 日 で 場合 分 け す る 


<Script type="text/javascript"> 
var d = new Date(): 
var day = d.getDay(): 
switch(day) { 
Case 9: 
Case 6: 
document.writeln('<img src="hday.jpg'> ): 土曜 日 ・ 日 曜日 の 場合 の 処理 で す 
break: 
default: 


document.writeln('<img src="wday.jp9g"> ): その ほか (平日 ) の 処理 で す 
1 


</script> 














月 EN だ た に (da を コ た 3 ワン と さと | 











居 Sample2-3-3 の 表示 


@669 サン ブル gr @G69 サン ブル 
人 ⑲ 02/Sample2-3-3.html (9 02/Sample2-3-3.html C 
ee 思 款 















平日 の 場合 の 表示 で す 土日 の 場合 の 表示 で す 








と ころ で 、 場 合 分 け を する と き に は 、「( も し ) だ っ た ら ・・・」 と いう 条件 を 書く こと が 必 
要 で す 。 こ うし た 条件 は どの よう に 書け ば よい の で し ょ うか ? ここ で 少し みて お く こ と に し ま 


し ょ う 。 
【 で ある 」 と いう 条件 は 、 次 の 記号 を 使っ て 作り ます 。 


玉 条件 を 作る 記号 





た と えば 、「 も し 12 時 以降 だ っ た ら ・・・」 と いう 条件 は 、 次 の よう に 書き ます 。 


h >= 12 12 時 以降 で あれ ば 成り 立つ 条件 で す 


「 も し 12 時 で な い 場 合 は ・・・」 と いう 条件 は 、 次 の よう に 書く こと に な り ま す 。 さ ま ざ ま な 条 
件 を 書く こと が で きる で し ょ う 。 





h !=、12 12 時 で な けれ ば 成り 立つ 条件 で す 


TipP ら 


表 中 の = ニニ と いう 記号 は 、 記号 の 左右 が 等 し いこ と を 調べ る た め の 記 号 で す 。 た と えば 、 h 
が 12 で ある か を 調べ る 場合 に は 「h==12] と し ます 。 ニ と = の 間 に ス ペー ス な ど は 入れ 
な い の で 注意 し て くだ さい 。 

また 、 「h=12] は 、h に 12 を 記憶 させ る コー ド で す の で 違い に 注意 が 必要 で す 。 


な 柔 件 も 考え よう 
次 の 記号 を あわ せ て 使う と 、 条 件 どう し を 組み 合わ せ て 、 さ ら に きめ 細か い 場合 分 けが で き 
ます 。 





中 複雑 な 条件 を 作る 記号 
&& : 論 理 積 (AND) 





左 と 右 が と も に 成り 立つ 場合 に 条件 が 成り 立つ と する 





| | : 論 理 和 (OR) 


左 と 右 の いずれ か が 成り 立つ 場合 に 条件 が 成り 立つ も の と す 
る 





! : 論理 否定 (NOT) 





右 が 成り 立た な い 場 合 に 条件 が 成り 立つ も の と する 





この 8&& や ||、! と いっ た 記号 は 、 条 件 を 組み 合わ せる た め に 使い ます 。 た と えば 、 次 の 条件 を 
みて くだ さい 。 


if(h>=9&&h<17) 9 時 以降 か つ 17 時 以前 で あれ ば 成り 立つ 条件 で す 








7/ ウ 5 コマ さっ 】 









ーJr き 年 RH1dHoSBAT 








EN た に (dl): コ に 3 ソン た マン 


&& は 「・・・ で あり か つ ・・・ 」 と いう 条件 を つく る 記号 で す 。 左右 2 つの 条件 が と も に 成り 立 
つ 場 合 に だ け 、 条 件 が 成り 立つ こと に な り ま す 。 

ここ で は 「9 時 以降 で あり 、 か つ 17 時 以前 で ある 」 と いう 条件 と な っ て いま す 。 つ まり 、「9 時 
か ら 17 時 まで で ある 」 と いう 条件 を 書い た わけ で す 。 


応用 ! オー プン と クロ ー ズ の 表示 分 け 








た と えば 、9 時 17 時 に 営業 し て いる 店 舗 の オー プン ・ ク ロー ズ を 表示 する た め に は 、 次 の 
よう な プロ グラ ム と すれ ば よい で し ょ う 。 条件 が 成り 立つ 場合 を 確認 し て みて くだ さい 。 




















Sample2-3-4.html 盾 条件 を 組み 合わ せ て 場合 分 け す る 


<SCript type="text/javascript"> 
var d = new Date(): 
var h = d.getHours(): 
if(h>=9&&h<17){ 
document.writeln("OPEN' ) : 
1 
elset 
document.writeln("CLOSED" ): 
| 


</script> 


上 Sample2-3-4 の 表示 









@G6@ サン ブル F 
| 3 02/Sample2-3-4.html e ! |[@」> 
| se 吉 ] 
@669 サン ブル 
旧 3 02/Sample2-3-4.html ルー ター 


| oo ロ 宗 


Koc) ョ 


オー プン 時 の 表示 で す 
クロ ー ズ 時 の 表示 で す 















チャ レジ ンジ !| 画像 を 全部 表示 し よう 
前 の 節 で は 、 状 況 に 応じ て 異な る 画像 を 表示 する よう に し まし た 。 今度 は た くさ ん の 画 
像 の 全部 を まとめ て 表示 する こと を 考え まし ょ う 。 た と えば 、pic0.jpg て pic5.jpg の 6 枚 の 
写真 が ある と し ます 。 こ れ ら を 全部 まとめ て 表示 し て み ま し ょ う 。 ど の よう に すれ ば いい で 
し ょ うか ? 
コー ド 中 に 画像 の 名 前 を 全部 書い て 表示 する こと も で きま す 。 で す が 、JavaScript の 機 
能 を 使え ば も っ と 簡単 に 表示 する こと が で きま す 。 
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mae ー キ ーーーー = 
| pic5.jpg 

















第 2 章 | JavaScript を は じ め よ う ! 
し ー | 2 ゃ し ーー ーー 
すべ て の 画像 を 、 ま と め て 表示 する に は 次 の よう に し ます 。 


Sample2-4-1.html 所 繰り 返し 表示 する 


<IDOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSs"> 

<title> サ ンプ ル </title> 

</head> 

<body> 

<SCript type="text/javascript"> 

for(var 1=9: 1<6: j++) { 
document.writeln('<jimg src="DiC +1 エ +「.jDg">「): 

} 

</Script> 

</body> 

</html> 


居 Sample2-4-1 の 表示 


eog ッ ン プル 





すべ て の 画像 が 表示 され ます 








1 の 53 の た さと 】 


品 1 庄 王 


ここ で は 、 次 の for 文 と いう 処理 に よっ て 6 枚 の 画像 を 全部 表示 し て いま す 。 


の 6 未満 で ある 間 ・・・ 
@ 吾 繰り 返し の 最後 に に を 1 つぶ や し ます 


for(var ji=9: 1<6: j++) { 


document.writeln('<img src="DIC + エ + ォ jpD9"> ): この 処理 を 繰り 返し ます 





1 


これ は 変数 i を 0 と 設定 し ( 夫 )、6 未 満 で ある 間 (@)、 画像 を 表示 する 「img」 タグ を 繰り 返 
し 作成 し 続け る 処理 で す 。 

は + の 「++」 は 、 イ ンク リ メ ン ト と 呼ば れ 、 値 を 1 つ ず つ 増 や す 処 理 で す ()。 1 回 分 の 繰り 返 
し 処理 が 終わ っ た 後に 変数 の 値 を 1 つ 増 や す の で 、6 回 繰り 返し た と き に 変数 が 6 と な り 、 繰 り 
返し が 終了 する の で す 。 

つま り 、 こ こ で は 次 の よう に for 文 を 使っ て 繰り 返し 処理 を 行っ て いる こと に な り ま す 。 





ロ 











構文 | for 文 
for(var 変数 = 初期 の 値 : 繰り 返し を 続け る 条件 : 繰り 返し の 最後 に 行う 処理 ) 


繰り 返す 処理 
1 





な お 、 繰 り 返し の 処理 の 中 で は 、 次 の よう に 変数 ij の 値 を 使っ て いま す 。 


変数 の 値 を 埋め 込ん で いま す 


document.writeln('<img src="DiC + エ +「.jpd"> 


| 


繰り 返し ご と に 変数 i が 1 つ ず つ ふ や され 、 pic0.jpg、 pic1.jpg9 … と いう 名 前 と な り ま すか ら 、 
ここ で は 次 の よう な Web ペ ー ジ を 作成 し て いる の と 同じ こと に な り ま す 。 


<jmg srC="DiC9.jDg"> 


ュ 電 コ 記 うな WV く 一 ミ 7: 
SUNOGSIGGIDBSJDHS SD す 
<img SrC="D1C2.jDg"> 


つま り 、 6 つの 画像 が すべ て Web ペー ジ 上 に 表示 され る わけ で す 。 
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第 2 章 | JavaScript を は じ め よ う ! 


Tips 


ここ で は JavaScript の 文字 列 を 指定 する た め に ' (シン ブル クォーテーション ) を 使い 、 
HTML で 画像 名 を 指定 する た め に " (ダブ ルフ ォ ー テ ーション ) を 使い まし た 。 ' と "は 逆 に 
し て も か まい ませ ん 。 た だ し 、 それぞれ が きち ん と 対応 され て いる よう に し ます 。 また 、 
変数 の 部 分 は ' や "で 囲ま ず に 、 文字 列 を 連結 する + で つなぐ こと に 注意 し て くだ さい 。 


イン クリ メン ト ・ デ フリメ ント < Column 


for 文 の 中 で 使っ て いる ++ 記 号 は 、 インクリメント と 呼ば れ 、 値 を 1 つ 増 や す 指定 と な っ て いま 
す 。 値 を 1 つ 減 ら す -- 記 号 も あり 、 デフ リ メ ン ト と 呼ば れ ま す 。 

イン クリ メン ト ・ デ クリ メン ト は 、1 つ ず つ 値 を 増やし た り 減ら し た りす る た め 、 処理 の 回 数 を 1 
回 ずつ カウ ント する と き な ど に よく 用 いら れ ま す 。 for 文 で は 、 イ ンク リ メ ン ト と デ ク リ メン ト が よく 
使わ れ ま す 。 


繰り 返し の パリ エー ショ ン 


JavaScript の 繰り 返し 処理 に は 、 次 の よう な バリ エー ショ ン が あり ます 。 


居 繰り返し 


for (初期 化 処理 条件 : 名 回 の 最後 の 処理 ) { 
条件 が 成り 立つ 場合 の 処理 
) 


while (条件 )( 
条件 が 成り 立つ 場合 の 処理 
} 











2-4 | 繰り 返し 処理 を し よう 


に に *・4 





dot 
条件 が 成り 立つ 場合 の 処理 
}while( 条件 ): 





Tips 


繰り 返し 文 は どれ も 繰り 返し 処理 を 行う こと が で きま す が 、 一 般 的 に 回 数 が 明確 な 繰り 
返し は for 文 を 使い 、 そ う で な い 場 合 に は while 文 を 使う 機会 が 多く な っ て いま す 。 






AALAAAAAA AA 4 Lu ee し よう 人 AALAAALKAAAAAAA TU の 
繰り 返し 文 を 使っ て さま ざま な Web ペ ー ジ を 作成 する こと が で きま す 。 実際 に プロ グラ ム を 
作成 し て 確認 し て み ま し ょ う 。 


旧 写真 の リス ト を 作成 する 


写真 の リス ト を 作成 し て み ま す 。 項目 を あら わす HTML 文 書 の 「i 要素 を 繰り 返し 出力 し ま 
す 。 リ スト 全体 を あら わす 「ul」 要素 は 、 繰り 返し の 外 で 出力 し ます 。 


Sample2-4-2.html 諸 リス ト を 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<Iink rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 

</head> 

<body> 

<SCript type="text/javascript"> 


document.writeln( <ul>'): 繰り 返し の 外 に 書き ます 


for(var i=9: 1<6: i++){ 


document.writeln('<li>'): リス ト 項 目 を 繰り 返し ます 


| 





N 
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JavaScript を は じ め よ う ! 





document.writeln('<img src="pic + ュ +「.jpg> )j 
document.writeln( "</1i>「): 
1 


document.writeln(「</ul>「): 繰り 返し の 外 に 書き ます 


</script> 
</body> 
</html> 


天 Sample2-4-2 の 表示 


@eo@ サン プル 


リス ト を か ん た ん に 作成 
する こと が で きま す 





上 1 行 の 表 を 作成 する 

表 を 作成 する こと も で きま す 。 セ ル を あら わす 「td」 要素 を 繰り 返す こと に し ます 。 

表 全 体 を あら わす 「table」 要素 は 、 繰 り 返 し の 外 で 処理 し ます 。 この 表 は 1 行 で ある の で 、 行 
を あら わす tr」 要素 も 繰り 返し の 外 で 処理 する こと に し ます 。 





Sample2-4-3.html 盾 表 を 作成 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CsS"> 
<title> サ ンプ ル </title> 

</head> 

<body> 


2-4 | 繰り 返し 処理 を し よう 





<Script type="text/javascript"> 
document.writeln( "<table>「): 
document.writeln('<tr>「'): 
for(var 1=9: 1<6: j++) { 
document.writeln('<td>'): 
document.writeln('<img src="DiC + エ +「.jDg'>「): 
document.writeln('</td>「 ): 
} 
document.writeln('</tr>「): 
document.writeln('</table>'): 
</SCript> 


</body> 
</html> 


居 Sample2-4-3 の 表示 


eoe@ サン プル 
= 回 9 Cmpez*- ュ hm 3 |@」 
9 円 束 
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第 2 章 





JavaScript を は じ め よ う ! 


リス ト と 表 ー < き Column 


リス ト ・ 表 を あら わす HTML 要素 に は 、 次 の 種類 が あり ます 。 リス ト ・ 表 は 複数 の 要素 か ら 構成 さ 
れ て いま す 。 








司 リ スト 硬 表 
| 叶 ) 率 。。 | = 開 昌 m* 。 lk | 
ul 箇条 書き リス ト table 表 (テー ブル ) 
ol 番号 つき リス ト caption 表 説明 
li リス ト 項 目 tr 1 行 
th 表 豆 
td 表 項 目 


繰り 返し 文 を 使い こ な そ う 
繰り 返し 処理 に な れる こと が で きた で し ょ うか ? 繰り 返し を 使う と き に は 、 繰 り 返 され て い 


る 部 分 を みつ け て コー ド を 作成 し て いく こと が 大 切 で す 。 表 や リス ト は 次 の よう に な っ て いま す 
か ら 、 各 項目 を 繰り 返し 文 で 書く こと が で きる わけ で す 。 





還 リ スト と 表 


リス ト 項 目 は 表 の 行 は 繰り 
繰り 返し で す 返し で す 


表 の セル も 繰り 返し で す 


繰り 返し 文 を 使う と き に は 、 繰 り 返 し の 部 分 と 繰り 返し で な い 部 分 に 注意 する こと が 必要 で 
す 。 繰り 返し で な い 部 分 は 、 繰 り 返 し 処理 の 外側 に 書い て いる こと に 注意 し て くだ さい 。 
と の よう に 、Web ペ ー ジ も 繰り 返し 文 を 使う と 簡単 に 表示 で きる 場合 が あり ます 。 








for(var 1: j<=6: +){( 
document.writeln( <tr>「'): 


for(var ji=1: 1<=6: 1++) { 


document.writeln('<td>'): 





行 項目 を 繰り 返し ます 
行内 の セル 項目 を 繰り 返し ます 


行 項目 を 繰り 
返し ます 
ーー ニー 
セル 項目 を 繰り 返し ます 








ーVir き 中 Rt1dUoSAT | 】 








了 チャ レン ジ !| 組み 合わ せ て 処理 し よう 


昌 合 分 け と 繰り 返し 処理 を 組み 合わ せれ ば 、 さ ら に きめ 細か い 処 理 を する こと が で きま 
す 。 

た と えば 、 次 の よう な サイ コロ の 目 の 画像 を 用 意 し て み ま し ょ う 。 こ の サイ コロ の 目 の う 
ち 、 条 件 に 合致 し た も の だ け を 表示 し て み ま す 。 こ こ で は 、 偶 数 の 目 だ け を 表示 し て みる 


こと に し まし ょ う 。 


選 サイ コロ の 目 (dice1.jpg て dice6.jpg) 












































偶数 だ け 表 示す る に は 、 次 の よう に 証文 と 繰り 返し 文 を 組み 合わ せる と か ん た ん で す 。 


Sample2-5-1.html 置 偶数 を 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet' href="Sample.CsS"> 
<title> サ ンプ ル </title> 

</head> 

<body> 








2-5 | きめ 細か く 処 理 し よう 


<Scr1ipt type="text/]javascript"> 


for(var ji=1: 1<=6: i++) { 偶数 で ある 場合 に ・・・ 
if(1 % 2 == 8){ 


document.writeln('<jmg src="dice' + エ +「.jD9"> ): その 目 の 画 像 を 表示 し ます 
1 





</SCript> 
</body> 
</html> 


天 Sample2-5-1 の 表示 


@9669 サン プル 
⑲9 02/Sample2-S5-1.html の |> 
eS 思 計 






偶数 の 目 だ け 表示 され ます 


こ は 2 


な お 、 こ こ で は 偶数 を 調べ る た め に 、 次 の よう な 条件 を 作っ て いま す 。 


A%B は 、A を B で わっ た と き の あ まり の 数 を 調べ る 記号 で す 。 こ こ で は 、 変 数 i を 2 で 割っ た 
と き に あま り が 0 と な る 場合 、 す な わ ち i が 偶数 で ある 場合 に 処理 を 行っ て いま す 。 

% の よう な 記号 は 演算 子 と 呼ば れ 、 計 算 を 行う 記号 で す 。 演算 子 に は 次 の 表 の よう な 種類 が 
あり ます 。 %( 剰 余 ) を 使う 計算 は あま りな じみ が な いか も し れ ま せん が 、「 た し ざん ,」 (加算 )、「 ひ 
きざん 」 (減算 )、「 か け ざ ん 」 (乗算 )、「 わ り ざ ん 」 (除算 ) の よう な 計算 は よく 使う も の で し ょ う 。 
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応用 ! 処理 を 組み 合わ せ て いく 
と この よう に 、 場 合 分 け と 繰り 返し 処理 を 組み 合わ せる と 、 い ろ い ろ な プロ グラ ム に 応用 する 
こと が で きま す 。 も っ と た くさ ん の プロ グラ ム を 作成 し て 確か め て み ま し ょ う 。 





上 奇数 の 目 を 表示 する 
今度 は 偶数 で は な く 、 奇 数 の 目 を 表示 し て み ま し ょ う 。 i%2 の 値 が 1 で ある か どう か を 調べ る 
こと に し ます 。 あ る 値 を 2 で 割っ た と き の あ まり が 1 で あれ ば 、 そ の 数 は 奇数 で ある か ら で す 。 




















Sample2-5-2.html 半 奇数 を 表示 する 


<SCript type="text/javascript"> 
for(var 1=1: 1<=6: j++) { 
if %2 = 1 
document.writeln( "<jimg src='dice'+1 エ +「.jD9"> ): 
) 


) その 目 の 画像 を 表示 し ます 


</script> 


時 Sample2-5-2 の 表示 


@@@9 サン ブル 
1 ⑨ 02/Sample2-5-2.html 











奇数 の 目 だ け 表示 され ます 











きめ 細か く 処 理 し よう 





還 表 を 縛 模 様 に する 
次 に 表 の 列 を 縮 模 様 に し て み ま し ょ う 。 偶数 列 だ け 色 を 変更 する よう に し ます 。 


Sample2-5-3.html 革 結 模 様 に する 


<SCript type="text/]javascr1Dt"> 
document.writeln('<table>'): 
document.writeln('<tr>「): 


for(var ji=9: 1<6: jr+){ 偶数 列 で ある 場合 に …・ 
if(i % 2 == 9){ 
document.writeln('<td id="on">「): 色 を 変更 し ます 


] 
elset 
document.writeln('<td id="off">「): 
| 
document.writeln('No.'+ ュ ): 
document.writeln('</td>「) 
1 
document.writeln('</tr>「'): 
document.writeln('<table>'): 
</script> 


居 Sample2-5-3 の 表示 


@ @⑥ サン ブル の 
還 9 02/Sample2-S-3.html C |@ | 


1 
凶器 


トド 


8 


サン プル 


Ni@⑳ No.1N@ 認 No. う 捉 @ 謗 No.2 
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偶数 列 と 奇数 列 で 


色 を 変え ます 





ここ で は 、JavaScript で 、 id="on" ま た は id="off" と いう ID 属性 を 指定 し た 2 種類 の 「tg」 要 

















素 を 作成 し て いま す 。 ID 属性 は 、HTML 文書 の 要素 を 特定 する た め に 使わ れる も の で す 。 ス タ 








イル シー ト の 中 で 、 そ れ ぞ れ の 要素 に 対し て 異な る 色 (レイ アウ ト ) を 指定 する こと で 、 要 素 の 


Script を は じ め よ う ! 








色 を 変更 し て いる の で す 。 色 を 変更 する 場合 に は 、 こ うし た テク ニッ ク が 使わ れ ま す 。 
この 章 で 使っ て いる スタ イル シー ト (Sample.css) の 中 身 を 確認 し て お きま し ょ う 。 な お # は 
ID 名 で ある こと を あら わし ます 。 


#on{ 色 つ き の セ ル に 適用 され る セレ クタ で す 


background-color: #2e8b57: 
color: 才 FFFF9: 
font-family: fantasy: 
] 
#offt 
background-color: 9986: 
color: 寺 FFFFB: 
font-family: fantasyi 


叶 格子 模様 に 変更 する 


今度 は 、 表 の 結 模 様 を 変更 し て み ま す 。 表 の 行 と 列 の 縮 模 様 を 工夫 し て 、 格 子 模様 に し て み 
ます 。 複雑 な 模様 も 、 処 理 を 組み 合わ せる こと で 作成 で きる の で す 。 


Sample2-5-4.html 牙 格子 模様 に する 


<Script type="text/javascript"> 

document.writeln('<table>'): 

for(var 1=1: 1<=9: j++) ( 
document.writeln('<tr>'): 


for(var お 1: )<=9: j+) { 


[人 数 行 ・ 人 数 列 ] と 大 
if(G%2 == 88&)%2==1)IG%2 =18& j%2 = 9))( 数 行 ・ 偶 数列] の 色 を ・・ 
document.writeln( <td id="on">「+ (jij) +'</td>「 ) : 
「 


else{ 
document.writeln('<td id="off "> + (1 結 ) +'</td>「 ) : 
1 


1 

document.writeln('</tr>「): 
1 
document.writeln('</table>「'): 
</script> 





目 Sample2-5-4 の 表示 


@69 サン プル 


| ⑨⑲ 02/Samplez-5-4.html c | 


eS 四 庄 
サン プル 


四 b 避 華 y 舞 
2 ィ 8 @iI2 ! 環 16 上 
b』 し 人 レ 表 四 2 ん 
條 8 軌 16 2⑳2 和 2822 名 
2 旨 2 92 旬 ク 製 


6!2 8 2 和 4926 製 3 獅 
/ 締 2 器 2 押 和 2? 魚の 
816 2 鐘 22 全 の 41829 6 中 
4 クセ ロッ ル ョ イツ / 当り 
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子 ャ レッ ンジ 1 デー タ を 準備 し て みよ う 

これ まで の 節 で は 、 番 号 を つけ て 画像 を 準備 し て み ま し た 。 し か し 、 実際 に Web ペ ー ジ 
を 作成 する 場合 に は 、 画像 名 に 番号 が 使わ れ て いる と は 限り ませ ん 。 さ ま ざ ま な 名 前 の 画 
像 デー タ を 扱う こと に な る で し ょ う 。 そ こ で 、 名 前 の 異な る 画像 デー タ を 扱う 方 法 に つい 
で 考 碗 で み ま じ よう 。 








時 名 前 の 異な る 画像 デー タ 














| animaljpg - 


画像 名 デー 意 


さま ざま な 名 前 の 画像 デー タ を 扱う と き 、 プ ログ ラム の 最初 の 部 分 に 、 画 像 名 の デー タ を 準 
備 し て お く と 役に立ち ます 。 画像 名 デー タ を 用 意 で きた ら 、 表 示し て み ま し ょ う 。 




















Sample2-6-1 .html 罰 デー タ を 用 意 する 


<IDOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet' href="Sample.CsS"> 
<title> サ ンプ ル </title> 

</head> 

<body> 

<Script type="text/]javascriDpt"> 





var str = ["animal.jpg', "flower.jpg', "green.jpdg']: 
for(var j=9: i<str.lengthi j+) { 


画像 名 デー タ の 配列 を 準備 し ます 


document.writeln('<img src="′+ str[i] + "> ): @ 配 列 を 表示 し ます 
| 
</SCript> 
</body> 
</html> 


天 Sample2-6-1 の 表示 


@o@ サン プル 





配列 デー タ で 指定 し た 画像 が 表示 され ます 


デー > ー」 士 う 


Sample2-6-] .html の 堆 の 部 分 が 、 画像 名 デー タ を 用 意 し て いる コー ド で す 。 


var str = ["animal.jpg', "flower.jpg', "green.jpg']: 画像 名 デー タ の 配列 を 準備 し ます 


デー タ の 弘 列 を 扱う し くみ を 、 配 列 と いい ます 。 配列 は 次 の よう に 準備 し ます 。 





Vari 変 数 = デー タ 1 デー タダ 2 < 配列 の 準備 方 法 で す 


上 で は 、str と いう 変数 に よっ て 画像 デー タ の 名 前 を 記憶 し た 配列 を 扱う よう に 準備 し て いる 
の で す 。 

さて 、 デ ー タ を 準備 し た ら 、 配列 を 利用 する こと が で きま す 。 の 部 分 が デー タ を 利用 し て 
いる コー ド で す 。 変数 str の [ ] に 指定 し た 番号 で 、 ど の 画像 か を 指定 し て いま す 。 配列 と し て 準 











ーW き 史記 1dJOSBABT 








lo:4 た 3 の ッ と さと 


備 し て お いた 画像 名 を 、 番 号 で 指定 で きる わけ で す 。 


document.writeln('<img src=""+ str[il + ">「): @ 配 列 を 利用 し ます 


つま り 配 列 は 次 の よう に し て 利用 する こと に な り ま す 。 配列 の 番号 を 添字 と いい ます 。 


PE 


配列 の 添字 は 0 か ら は じ ま り ます 。 つま り 、 str[0] が animalLjpg、 str[1] が flower.jpg、 
str[2] が green.jpg を あら わす わけ で す 。 3 つの 要素 か ら な る 配列 の 場合 、 最後 の 要素 を 
指定 する た め の 添 字 は 、 要素 数 より 1 つ 小 さい こと に 注意 し て くだ さい 。 str[3] と いう デ 
ー タ は 存在 し な いこ と に 気 を つけ る 必要 が あり ます 。 








還 配列 デー タ 





EllllEI 朋 | 1e| flower.jpg green.jpg 


応用 ! 配列 デー タ を 用 意 し て 活用 する 





配列 を 使っ て 、 い ろ い ろ な デー タ を 用 意 し 、 プ ログ ラム に 活用 し て み ま し ょ う 。 





2-6 | デー タ を 準備 し よう 


画商 品名 を 表示 する 

商品 名 デー タ を 用 意 し 、 す べ て 表示 し て み ま す 。「 オ レン ジ 」「 み か ん 」「 い ちご 」・・・ と いう 商 
品名 デー タ を 用 意 し ます 。 あらかじめ 商品 名 デー タ を 準備 し て お き 、 プ ログ ラム の 中 で 活用 で 
きれ ば 便利 で し ょ う 。 



















































































Sample2-6-2.html 時 商品 名 を 表示 する 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<link rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 
</head> 
<Script type="text/javascript"> 
Var str =[" オ レン ジ "," み か ん "いち ご "も も " "くり" がき"]: 
document.writeln('<ul>「): 
for(var ji=9: i<str.lengthi j++){ 
document.writeln('<li>「): 


document.writeln(str[i]): 商品 名 を 表示 し ます 


document.writeln('</1i>'): 





| 
document.writeln('</ul>「): 
</Script> 

</bodV> 

</html> 


天 Sample2-6-2 の 表示 


@@69 サン ブル me 
人 9 02/Sample2-6-2.htmi ロ 」 ゥ 


商品 名 が 表示 され ます 
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配列 名 に 「.length] を つけ る こと で 、 配列 中 の デー タ 個 数 を 知る こと が で きま す 。 この コ 
ー ド の 繰り 返し 文中 で は 、「str.length] と 指定 し て 、 デー タ の 個数 だ け 繰 り 返 し を 行っ て 
いま す 。 


還 曜日 名 を 表示 する 

次 に 、 曜 日 名 デー タ を 用 意 し 、 表 示し て み ま す 。 Date オ ブ ジ ェクト の getDay() メソ ッ ド は 曜 
日 を 調べ る こと が で きま す が 、 曜 日 名 で は な く 曜 日 を あら わす 数 値 し か 得る こと が で きま せん 。 
そこ で 、 曜 日 名 を 配列 デー タ で 準備 し て 表示 し よう と いう の で す 。 「Sun」「Mon」「Tue」・・・ と 
いう 曜日 デー タ を 用 意 し ます 。 な お 、 土曜 日 (Sat) と 日 曜日 (Sun) の 色 を 変更 し て み ま し た 。 














Sample2-6-3.html 置 曜日 名 を 表示 する 


<!DOCTYPE html> 

<html lang="]3"> 

<head> 

<link rel="stylesheet' href="Sample.CSS"> 

<title> サ ンプ ル </title> 

</head> 

<body> 

<Script type="text/javascript"> 

document.writeln('<table>'): 

var str = ["Sun',"Mon","TUe","Wed"」"ThU' "Fri","Sat"]: ト 折 し 

for(var i=9: 1<7: j++) { 
document.writeln('<tr>'): 


varr=1i%7: 
if(r ==9|lr==56){ 

document.writeln( <tr id="on">「): 
elset 


document.writeln('<tr id="off">「): 平日 の 処理 で す 


] 


document.writeln('<td> + str[i] +'</td>「): 曜日 名 を 表示 し ます 


document.writeln('</tr>「'): 


] 


document.writeln('</table>'): 


</script> 
</body> 
</html> 








デー タ を 準備 し よう 





時 Sample2-6-3 の 表示 


@669 サン ブル 
⑲ 02/Sample2-6-3.html と |1O」> 
| es m 時 


曜日 名 が 表示 され ます 





| Tips 


デー タ を 用 意 する 方 法 に は 、 こ の ほか に も さま ざま な 方 法 が あり ます 。 大 量 の デー タ を 用 
意 す る に は 、 ファ イル や デー タベース を 使っ て 準備 する こと も あり ます 。 





| 上 
プン 
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チャ レシ ンジ ! オリ ジ ナ ル の カレ ンダ ー を つく ろう 
JavaScript を 使っ て 、 い ろ い ろ な Web ペ ー ジ が 作成 が で きる よう に な り ま し た 。 それで 
は 、 こ れ ま で の 知識 を 応用 し て 、 Web ペ ー ジ に 実践 的 な 機能 を 付け 加え て いく こと に し ま 
し よう 。 
こと この節 で は 、 Web ペ ー ジ 上 で カレ ンダ ー を 作成 し て みる こと に し ます 。 今月 分 の カレ ン 
ダー を 作成 し 、 Web ペ ー ジ と し て 表示 し て み ま し ょ う 。 


恒 カ レン ダー を 作成 する 


December 


カレ ンダ ー を 
表示 し ます 





ンプ 概要 を 設計 する 


まず 、 カ レン ダー の 概要 に つい て 考え て お きま し ょ う 。 Web ペ ー ジ を 作成 する に あたっ て は 、 
どの よう な 機能 を 作り 上 げ て いく の か 、 そ の 概要 を 考え て お く こ と が 大 切 で す 。 

ここ で は 、 現在 の 月 を 大 きく 表示 し 、 その 下 に 日 付 の 共 列 を 表示 する こと に し ます 。 月 は 「h]」 
要素 を 使っ て 大 きく 表示 し 、 日 は 「table」 要素 を 使っ て 表示 する こと に し ます 。 



































2-7 | 実践 ! カレ ンダ ー を 作 


恒 カ レン ダー の 表示 の 概要 を 考え る 









見 出し 「h1] に よっ 
て 月 を 表示 し ます 










December 


表 [table] に よっ て 
日 付 を 表示 し ます 


ググ プ コー ド を 考え る 


下 日 時 を 調べ る 


それ で は 、 い よい よ JavaScript の コー ド を 考え る こと に し まし ょ う 。 日 時 は これ まで みて き 
た よう に 、Date オ ブ ジ ェクト か ら 調 べ る こと が で きる で し ょ う 。 曜日 名 の 配列 デー タ を 用 意 す 
る こと に し ます 。 


var str = ["Sun',"Mon","Tue" "Wed" "Thu" "Fr1" "Sat"]: 1 


明月 を 調べ る 


次 に 、Date オ ブ ジ ェクト か ら 月 を 調べ まし ょ う 。 現在 の 月 を 見 出し と し て 表示 する こと に し 
ます 。 





document.writeln("<h1>"): 
var d = new Date(): 


var m = d.getMonth(): 月 を 調べ ます 


document.writeln(m+1): 


document.writeln("</h1>"): 


】 
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叶 日 数 分 繰り 返す 

















1 か 月 に 日 の 部 分 は 30 日 前 後 あ り ま すか ら 、 プ ログ ラム らし く 繰 り 返 し 文 を 使っ て 、 か ん た ん 
に 表示 する こと に し まし ょ う 。 

ここ で 注意 し な けれ ば な ら な い の は 、 月 の 最後 の 日 の こと で し ょ う 。 月 の 最後 の 日 は 月 に よっ 
て 異な り ま す 。 こ れ は 次 の 指定 に よっ て 調べ る こと が で きま す 。 


var fd = new Date(d.getFullYear(), d.getMonth(), 1): = 
var f = fd.getDay(): や 
var ld = new Date(d.getFullYear(), d.getMonth()+1, 8): 


for(var j=1: 1<=ld.getDate(): j++){ 






































月 の 最後 の 日 を 得る こと が で きま す 


目 日 数 分 繰り 返す 







December 





繰り 返し 文 で 
表示 し ます 







最後 の 日 付 を 調べ 
る 必要 が あり ます 





之 み ププ カレ ンダ ー を 完成 させ る 


それ で は 、 こ こ で 見 て きた コー ド を も と に し て 、 カ レン ダー を 作成 し て いき まし ょ う 。 こ の 章 
の これ まで の 表示 と は 違い 、 カレ ンダ ー の 表示 用 の スタ イル シー ト (Cal.css) も 作成 し て み ま す 。 

















Sample2-7-1.html 訪 カレ ンダ ー を 作る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Cal.css"> 
<title> サン プル </title> 

</head> 

<body> 





実践 ! カレ ンダ ー を 作る 


<script type="text/javascript"> 
var str = ["Sun", "Mon","Tue",」 "Med" "ThuUT "FT "Sat"]: 
document.writeln("<h1>"): 
var d = new Date(): 
var m = d.getMonth(): 
document.writeln(mr1): 
document.writeln("</h1>"): 


document.writeln("<table>" ): 


var fd = new Date(d.getFullYear(), d.getMonth(), 1): 


var f = fd.getDay(): 月 の 最後 の 日 を 調べ ます 


var ld = new Date(d.qetFullYear(), d.getMonth()+1, 9): 


for(var ji=1: 1<=ld.getDate(): j++) { 月 の 最後 の 日 を 得る こと が で きま す 


document.writeln("<tr>"): 
document.writeln("<td>”): 
document.writeln(1): 
document.writeln("</td>" ): 
document.writeln("<td>" ) : 
document.writeln(str[(f+i-1)%7] ) : 
document.writeln("</td>『) 
document.writeln("</tr>" ): 

1 

document.writeln("</table>”): 


</script> 
</body> 
</html> 


Cal.css 計 スタ イル シー ト 


body( 
background-color: 才 FFFFF: 
color: #2e8b57: 
font-size: 2em: 
font-family: fantasy: 

| 

h1{ 
backqground-color: #2e8D57: 


color: 才 FFFF9: 見 出し 「h1」 に よっ て 月 を 表示 し ます 


font-size: 2em: 





font-family: fantasyi 
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第 2 章 | JavaScript を は じ め よ う ! 





時 Sample2-7-1 の 表示 


」 介 @@ サン ブル La 
生 細 へ Coogle で 挟 索 、 ま た は アド レス を 入力 





Thu 
月間 
5at 


に の 


ら un 
Mon 
IPー 
Wed 
Thu 





cc い NN の へ いふ よ の 





いか が で し ょ うか ? これ まで の 知識 を 活用 し て 、 実 用 的 な Web ペ ー ジ を 作成 する こと が で 
きた で し ょ うか ? 学ん だ 知識 を 生か し 、 さ ま ざ ま な デザ イン や ぜ や 構成 を も つ 、 オ リ ジ ナ ル の カレ 
ンダ ー を 作成 し て みて くだ さい 。 


スタ イル シー ト で レイ アウ ト を 行え ば 、 同じ 構成 で も や 、 い ろ い ろ な デザ イン の カレ ンダ ー 
を 作成 する こと が で きま す 。 また 、 JavaScript の コー ド を 変更 する こと に よっ て 、 さま ざ 
まな 要素 を 持つ カレ ンダ ー を 作成 する こと が で きる で し ょ う 。 











第 3 草 


JavaSCrIDt で 
動か が か そつ! 


EN た に tellojdE 績 (1 人 も ニ トッ 4 et ) に 北 : ウ pk っ 7 は の / 届か に さん 
リッ ク し た と き に 画像 や テキ スト を 入れ 替え た り 、 ウ ィ ン ド ウ を 表示 する 
こと が で きま す 。 こ の 章 で は 、 JavaScript を 使っ て Web ペ ー ジ を ダイ 


と ニル 4 リア の XS の ts さり チ さ っ 及 








チャ レン ジ ! フリ ッ ク で 動作 する よう に し よう 
JavaScript を 使っ て Web ペ ー ジ を 動か し て いく こと が で きま す 。 そ こ で この 節 で は 、 
Web の 画面 を 操作 し た と き に 動作 する Web ペ ー ジ を 考え て み ま し ょ う 。 
まず 最初 に 、 画像 を クリ ッ ク し た と き に メッ セー ジ が 表示 され る プロ グラ ム を 考え て みる 
と と に し ます 。 





生 ク リッ ク で 動作 する Web ペ ー ジ 


CuIC ん / パパ 


動作 する よう に し ます 


避 
| 





ー ザ ザー 記 ヾ ふう 





それ で は 、 ど う や っ て Web ペー ジ を 動か し た らい いで し ょ うか 。 ユー ザー が Web ペ ー ジ を 操 
作 し た と き に ペー ジ を 動か す た め に は 、 次 の よう に プロ グラ ム を 作成 し ます 。 

















し の 
ココ の ーー の ルト 北 コ 
E さ ゴン た 


2 に こち 
どこ を 操作 し た と き に 角 輝 操作 の 種類 を 指定 する 
動作 する の か を 決め る 








3-1 クリ ッ ク で 表示 し よう 





時 処理 を まとめ る 

まず 、 ユ ー ザ ー が ペー ジ を 操作 し た と き に 、 ど の よう に 処理 を 行う の か を まとめ て お きま す 。 
この た め に は 、 function と いう 指定 の あと に 「 処 理名 ( )」 と 入力 し 、 { ] 内 に 順番 に 処理 を ま と 
め る こと に な り ま す 。 な お 、 「 処 理名 」 は 変数 の 名 前 と 同じ よう に 自分 で つけ て か まい ませ ん 。 





ftmetion 和 () 


( 


処理 処理 を まとめ ます 


・・・ 


た と えば 、 メ ッ セ ー ジ を 表示 する 処理 を まとめ て み ま し ょ う 。 こ こ で は 、welcome() と いう 名 
前 を つけ て 、 ウ ィ ン ド ウ に メッ セー ジ を 表示 する 処理 を まとめ て み ま し た 。 


function welcome() 


{ 
window.alert(" よう こそ !『): メッ セー ジ を 表示 し ます 


) 


2】 


「 処 理名 」 に は 、 変 数 と 同じ よう に 自分 で 適当 な 名 前 を つけ て か まい ませ ん 。 わか りや すい 
名 前 を つけ る よう に し まし ょ う 。 


上 どこ を 操作 し た と き に 処理 する の か を 決め る 


次 に 、 ユー ザー が Web ペ ー ジ 上 の どの 部 分 を 操作 し た と き に 動作 する の か を 決め ます 。 た と 
えば 、 画像 を 操作 し た と き に 動作 する よう に 考え て み ま し ょ う 。 「img」 要素 を 操作 し た と き に 動 
作 す る よう に 考え ます 。 


どこ を 操作 し た と き に 処理 
する の か を 決め て お きま す 


<img Src="Sample.jD9"・** 
採 作 の 種類 を 指定 する 


そし て 、 ど ん な 操作 を し た と き に 処理 を する の か 、 そ の 操作 の タイ ミン グ を 指定 し ます 。 た 
と えば 、「 ク リッ ク し た と き 」 に 処理 を 行う た め に は 、 操 作 の 対象 を あら わす 要素 の タグ 中 に 
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onclick=" 処 理名 ()" と 指定 し ます 。 onclick は 「 ク リッ ク し た と き 」 を あら わす 指定 で す 。 

ここ で は 、 画 像 を あら わす img タ グ 中 に 、onclick="welcome()" と 指定 し ます 。 こ の 指定 に よ 
っ て 、 画 像 を クリ ッ ク し た と き 、 先 ほど welcome() に まとめ て お いた 処理 が 行わ れる よう に な 
る の で す 。 


<img Src="Sample.jpg′ onclick= "welcome()"/> 操作 の タイ ミン グ を 指定 し ます 


それ で は 、 ク リッ ク し た と き に ウィ ンド ウメ ッ セ ー ジ を 表示 する ペー ジ を 作成 し て み ま し ょ う 。 
な お 、 こ の 章 で は 次 の スタ イル シー ト を 使う こと に し ます 。 


Sample.css 時 3 章 の スタ イル シー ト 


body{ 
background-color: #88966: 
color: 寺 FFFF9: 
font-size: 2em: 
font-family: fantasyi 

| 

#Smallimaget 
width: 49Dx: 
height: 38pxj 


Sample3-1-1.html 扇 クリ ッ ク で 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSs"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 

function welcome() 


{ 
了 | gy。 メッ セー ジ を 表示 する 処理 
window.alert(" ログ イン し て くだ さい 。"): を まとめ て お きま す 


</SCript> 


画像 を ・・・ 
</head> クリ ッ ク し た と き に 処理 し ます 
<body> 


<img Src="flower.jpg'′ 0nclick= “welcome()"/> 





3-] | クリ ッ ク で 表示 し よう 


</body> 
</html> 


天 Sample3-1 -1 の 表示 


@99 サン ブル 
⑲ 03/Sample3-1-1.html LO 」>| 
eS 思 肝 





JavaScript 
庁 光 ⑯ ログ イン し て くだ さい 。 
メッ セー ジ が 表示 され ます 

















2 に コ = 


操作 の タイ ミン グ に は 、 い ろ い ろ な 種類 が あり ます 。 た と えば 、 ペ ー ジ を 読み 込む 際 に 処理 が 
行わ れる よう に する に は 、onload=" 処 理名 ()" と 指定 し ます 。 ダ ブル クリ ッ ク し た と き に 処理 す 
る に は 、ondblclick=" 処 理名 ()" と 指定 し ます 。 こ れ ら 操作 の タイ ミン グ の 種類 は 、 イ ベン ト と 
呼ば れ て いま す 。 

次 の よう な イベ ント を 指定 する こと が で きま すか ら 、 い ろ い ろ な タイ ミン グ を た めし て みて く 
だ さい 。 











司 イ ベン ト の 種類 
load 読み 込み 時 keypress キー を 押し た と き 
unload 8 ペー ジ の 移動 時 keydown キー を 下げ た と き 
resize サイ ズ 変 更 時 keyup キー を 上 げた と き 
click WW 人 人 人 人 人 人 ず ぴ NN 人 NNN ウ に Re 
dblclick 222 り ッ ク 時 blur フォ ー カ ス 衰 失 時 
mousedo、 NN change  。 フォーム の 変更 時 
mouseup select フォ ー ム の 選択 時 
mouseov 1 submit 。 フォ ー ム の 送信 時 
mouseout マウ スカ ー ソル が 苺 れ た と き reset フォ ー ム の リセ ッ ト 時 





mousemove 。 マウ スカ ー ソ ル が 動い た と き 





| 
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第 3 草 | JavaScript で 動か そう ! 





2 


マウ ス で クリ ッ ク し た り 、 マ ウス カー ソル を あて た りす る 操作 は 、 Web ペ ー ジ に と っ て 
は 重要 な 出来 事 で し よう 。 プロ グラ ミン グ の 世界 で は 、 こ の よう な 出来 事 (event) を 「 イ 
ベン ト 」 と 呼ん で いる の で す 。 


| 応用 ! イベ ント の 処理 を し よう 





それ で は 、 実際 に いろ いろ な イベ ント の 処理 を 行い 、 動 作 を 確認 し て み ま し ょ う 。 


較 ダブ ルフ リッ ク 時 に 表示 する 
ondblclick=" 処 理名 0" と 指定 する こと で 、 ダ ブル クリ ッ ク 時 に 処理 で きる よう に な り ま す 。 
画像 を ダブ ルク リッ ク し た と き に 、 そ の 画像 を 新しい ウィ ンド ウ で 表示 する よう に し て み ま し ょ 


o 


7 


Sample3-1 -2.html 諸 ダブ ルク リッ ク で 表示 する 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<link rel="stylesheet' href="Sample.CSS"> 
<title> サ ンプ ル </title> 
<Script type="text/javascript"> 
function welcome() 
( 
window.open( "animal.jpg', "サン プル ", "width=198,height=198"): 
} 


</SCcript> 


MM ダブ ルク リッ ク 時 に 処理 し ます 
<body> 
<imd SrC="animal.jpg' Ondblclick= “welcome()"/> 


</body> 
</html> 


Window オ ブ ジ ェクト の open() メ ソ ッ ド を 使う と 、 新しい ウィ ンド ウ を 開く こと が で き 
ます 。 ここ で は 、 開く ファ イル 名 、 タイ トル 、 ウィ ンド ウ の 幅 ・ 高 さ を 指定 し て 、 新しい ウ 
ィ ン ド ウ を 表示 し て いま す 。 な お 、 Window オ ブ ジ ェクト は ウイ ンド ツウ 機能 を まとめ た も 
の で 、 オブジェ クト を 作成 し な く て も 「window] と いう 変数 で 利用 する こと が で きま す 。 








中 Sample3-1 -2 の 表示 


@99 サン ブル ド 
上 ⑲ 03/sample3-1-2.html C 胃 QO |>| 





画像 を 表示 し ます 


胃 ボタ ン の クリ ッ ク で 表示 する 
ボタ ン を あら わす 「input」 要素 の 中 に onclick=" 処 理名 ()" を 記述 する こと で 、 ボ タン を クリ 
ッ ク し た と き に 処理 で きる よう に な り ま す 。 


Sample3-1-3.html 計 ボタ ン の クリ ッ ク で 表示 する 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<link rel="stylesheet' href="Sample.CSS"> 
<title> サ ンプ ル </title> 
<Script type="text/javascript"> 
function welcome() 
( 
window.open("green.jpg', "サン プル ", "width=198, height=198"): 
1 
</Script> 
</head> 
<body> 
<imd srC="green.jD9"/> 
<jnput type="button" value="Push Button” onclick= "welcome()"/> 
</body> 


</html> ポタ ン を ・・・ クリ ッ ク し た と き に 表示 し ます 
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JavaScript で 動か そう ! 


量 Sample3- 1-3 の 表示 


@99 サン ブル F 
介 03/Sample3-1-3.html で 1O」> 





クリ ッ ク し た と き に 表示 し ます 





ここ で 処理 を まとめ る し くみ は 、 関 数 (function) と 呼ば れ て いま す 。 関数 は イベ ント が 発生 し た 
と き に 、 { ! 内 に まとめ た 処理 が 順番 に 行わ れる し くみ に な っ て いま す 。 | 関数 ] と いう 言葉 は 、 あま 
りな じみ が な い 言 葉 か も し れ ま せん が 、 プ ログ ラミ ング の 世界 で は よく 使わ れる 言葉 で す 。 処理 や 
機能 を まとめ る た め の し くみ と し て 使わ れ て いま す 。 覚え て お く と 便利 で し ょ う 。 


function welcome() 


と 
NMeqtdedei 


1 





チャ レン ジリ | 画像 を 入れ 替え る に は ? 
前 の 節 で は 、 ク リッ ク し た タイ ミン グ な ど で 、 画像 や メッ セー ジ を 表示 し て し て み ま し た 。 
た だ し 、 前 の 節 の プロ グラ ム で は 、Web ペ ー ジ と は 別 の ウィ ンド ウ を 開い て メッ セー ジ や 画 
像 を 表示 し て いま す 。 
クリ ッ ク し た タイ ミン グ で 、Web ペ ー ジ 上 の テキ スト や 画像 を 差し 替え る に は 、 さ ら に い 
ろ い ろ な 方 法 を 学ん で 身 に つけ て いく 必要 が あり ます 。 
そこ で 、 今度 は クリ ッ ク し た タイ ミン グ で 、Web ペ ー ジ 上 の 画像 を 入れ 替え て みる こと 
に し まし ょ う 。 Web ペ ー ジ 上 の 画像 は 、 か ん た ん な 方 法 で 入れ 替え る こと で きま す 。 





選 ペー ジ 中 の 画像 の 入れ 替え 


CuIC ん / 


= 


②= で 





クリ ッ ク し た タイ ミン グ で 、Web ペ ー ジ 上 の 画像 を 入れ 替え る に は 、 次 の ペー ジ を 作成 し ま 
す 。 
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Sample3-2-1.html 置 画像 を 入れ 替え る 


<!DOCTYPE html> 

<html lang=" ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSS"> 
<title> サン プル </title> 

<Script type="text/javascript"> 


function change() EE 
( 画像 要素 の 名 前 を 指定 し ます 


document.image.src = "green.jpd': 


テ em 
</script> 入れ 替え る 画像 を 指定 し ます 
</head> ー ー 

<body> 名 前 を つけ て お きま す 


<img name="1mage'′Src="flower.jD9"> 

<input type="button" value=" 変 更 " onclick="change()"/> 
</bodV> 

</html> 


恒 Sample3-2-1 の 表示 


eo@ サン プル Pa eo サン ブル gn 
『 9 03/Sample3-2- 1 .html 








⑲ 03/Sample3-2-1.html 





ボタ ン を 押す と ・・・ 画像 を 入れ 替え る こと が で きま す 


える た め に は ? 


画像 を 入れ 替え る に は 、 ま ず 画 像 を あら わす 「img」 要素 の 「name」 属性 を 使っ て 、 名 前 を つ 
け て お く こ と に し ます 。 こ こ で は 、 image と いう 名 前 を つけ る こと に し まし た 。 





3-2 | 画像 を 入れ 替え よう 


<img name="1made' Src="flOwer.jD9"> 
画像 要素 に 名 前 を つけ て お きま す 


する と 、document. 名 前 .src=" 新 し い 画 像 ファ イル 名 "と 指定 する こと で 、 画 像 だ け を 入れ 替 
える こと が で きる よう に な り ま す 。 

つま り 、 こ こ で は 次 の よう に 、 flower.jpg か ら green.jpg に 画像 を 入れ 替え る こと が で きる わ 
け で す 。 


document .1mage.SrC = "green.jDd': 新しい 画像 に 入れ 替え ます 


応用 ! 画像 を 順に 表示 し よう 


それ で は 、 写 真 を 7 枚 用 意 し て お き 、 ク リッ ク し た と き に 順番 に 画像 を 表示 し て いく こと に し 
まし ょ う 。 


Sample3-2-2.html 諸 画像 を 順番 に 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 


var i=B: 処理 が は じ ま る 前 に 番号 を 0 と し て いま す 
function change() 

14+: 次 の 画像 と し ます 
if(i == 7) 9: 


( 
document.image.src = "picC"+ ェ + ィ jpg'i 
| 画像 を 表示 し ます 
</script> 
</head> 
<body> 
<jmg name="1mage' SrC="DiCB.jDdg"> 
<form> 
<input type="button" value=" 借 "onclick="change()"/> 
</form> 
</body> 
</html> 








存在 し な い 番号 に な っ た ら 
番号 を 0 に 戻し ます 


l 
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Sample3-2-2 の 表示 


9 G G サン ブル @e Geo サン ブル 
介 9 03/Sample3-2-2.html っ GO > 層 03/Sample3-2-2.htm ン ら > 
ea 呈 杜 ee 中 圭 





ボタ ン を 押す と ・… 画像 が 順番 に 表示 され ます 


egoe サン プル eoe サン ブル 
9 03/5Sample3-2-2.html こ O > 介 03/Sample3-2-2.htmi 9 O > 
に 


に 
邊 サン プル + 








サッ プル @ サン プル 
人 ⑲ 03/Sample3-2 O > 人 03/Sample3-2-2.htm 9 O > 
eS FI 台 eS 証 手 

1 ッ ン プル | 








3-2 | 画像 を 入れ 替え よう 


ここ で は 、 順 番 に pic0、pic 1 ・・・ と な る よう に 変数 i を ふやし て いま す 。i が 7 で あれ ば 、0 に 
戻し て 最初 の 画像 を 表示 する よう に し て いま す 。 


Var 1i=Bj 処理 が 始ま る 前 に 番号 を 0 と し て いま す 


function change() 


Mi 次 の 画像 と し ます 
1++5 


if(i = 7) 6 
document.image.SrCc = "DiC" + ェ ュ +".)Dd': 


) 画像 を 表示 し ます 






存在 し な い 番号 に な っ た 
ら 番 号 を 0 に 戻し ます 





居 画像 を 次 々 と 表示 する 





Tip ら 


な お 、 こ の 変数 i は 、 処理 が は じ ま る 前 に 、 処理 の 外側 で 準備 し て いま す 。 処理 が いっ た ん 
終了 し て も 、 変数 の 値 が 引き 続き 記憶 され 続け る よう に する た め に は 、 処理 の 外側 で 変数 
を 準備 する 必要 が あり ます 。 
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チャ レン ジ ! サイ コロ の 目 を 表示 し よう 


サイ コロ を ふる と 、1 回 目 は 5 の 目 が 、2 回 目 は 1 の 目 と いう よう に 、 ラ ンダ ム に 目 を 出 
すこ と が で きま す 。 こ ん な ふう に 、Web ペ ー ジ で ラン ダム に 数 字 や 画像 を 表示 し た い 場 合 
が あり ます 。 そ こ で この 節 で は 、 ラ ンダ ム に 画像 を 表示 する 方 法 に 挑戦 し て み ま し ょ う 。 


呈 ラ ンダ ム な 表示 














eo” 租 ”e 
る @ 人 
1 回目 2 回 目 3 回 目 


ーー てこ 二 ーー 


ラン ダム に 画像 を 表示 する に は 、 次 の よう に プロ グラ ム を 作成 し ます 。 ボタ ン を 押す と 、1 
6 の 目 の い ずれ か が ラン ダム に 表示 され ます 。 


Sample3-3-1.html 選 ラン ダム に 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.css"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 

function welcome() 


{ 1 一 6 の ラン ダム な 整数 を 作成 し ます 
varr = parseInt(Math.random() * 5) + 1: 
document.dice.src = "dice"+F+".jD9': ラン ダム な サイ コロ の 目 を 表示 し ます 


) 





レジ ルプ (ビシ 





</script> 

</head> 

<body> 

<img SrC="dice1.jDg" name="diCe"> 

<input type="button" value=" 氏 "onclick= “welcome()"/> 
</body> 

</html> 

</body> 

</html> 


画 Sample3-3-1 の 表示 


@69 サン ブル 
由 03/Sample3-3-1.html C >> 
EEE gg 


ボタ ン を 押す と ・・・ 





@9@ の 6 サン プル 
内 03/Sample3-3-1.html ン 比 22 
eS 還 財 







@G@ サン ブル 
@9 03/Sample3-3-1.html 


eS 皿 財 









2 


サン プル 





ラン ダム な サイ コロ 
の 目 を 表示 し ます 
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ラン ダム に 表示 する に は 3 


画 一 価 ま で の 整数 ( 代 を 含む ) を ラン ダム に 表示 する に は 、 次 の よう に Math オ プ ジ ェ クト の 
random() メソ ッ ド を 使い ます 。 


parseInt(Math.random() * 代 ) + 田 : 画 一 @ の ラン ダム な 整数 を 作成 し ます 


た と えば 、 こ こ で は 1 て 6 まで を ラン ダム に 得る た め に 、 次 の よう に 指定 し て いる わけ で す 。 
varr= parseInt(Math.random() * 5) + 1: 1 一 6 の ラン ダム な 整数 を 作成 し ます 


2 


Math.random() は 、 Math オ ブ ジ ェクト の メン バ で 、 乱数 と 呼ば れる ラン ダム な 小数 (0 
以上 1 未満 ) を 求め る こと が で きま す 。 

また 、 parselnt() は 、 小数 を 整数 に 変換 する 機能 を も ち ま す 。 random() で 求め た 小数 を 
整数 に 変換 し て いま す 。 


Math オ ブ ジ ェクト < Column 


Math オブジェ クト で は 、 random() メソ ッ ド の ほか に も 次 の よう な メン バ を 利用 する こと が で き 
ます 。 Math オ ブ ジ ェクト は 、 数 学 の 計算 を する 機能 を まとめ た オブ ジェ クト と な っ て いま す 。 


中 Math オプ ジェ クト の 主 な メン バ 


ceil(num) 切り 上 げ て 整数 を 取得 
floor(num) 切り 捨て て 整数 を 取得 
round(num) 四捨五入 で 整数 を 取得 
abs(num) 絶対 値 を 取得 
max(num1.num2) 最大 を 取得 
min(num1.num2) 最小 を 取得 
Pow(num, D) p 乗 を 取得 
sqrt(num) 平方 根 を 取得 
sin(num) サイ ン を 取得 
cos(num) コサイン を 取得 
tan(num) タン ジェ ント を 取得 
random() 0 以上 1 未満 の 乱数 を 取得 


PI 婦 














| 応用 # ラン ダム な 数 を 使い こ な そ う 


ラン ダム な 数 値 を 得る こと が で きれ ば と て も 便利 で す 。 工夫 次 第 で さま ざま な Web ペ ー ジ を 
考え る こと が で きる で し ょ う 。 


思 ラン ダム に 入れ 替え る 

画像 を クリ ッ ク す る た びに ラン ダム に 表示 し て み ま し ょ う 。 今度 は サイ コロ の 目 の 画 像 の か 
わり に 写真 画像 を 使い ます 。 同じ プロ グラ ム で も 、 画 像 を 差し 替え る こと で 、 い ろ い ろ な Web 
ペー ジ に 応用 する こと が で きる の で す 。 


Sample3-3-2.html 時 写真 を ラン ダム に 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 

function welcome() 


{ 
Varr = DPparseInt(Math.random() * 6) + 1: 
document.pic.Src = "DiC'+T+".jpd'i 

} 

</script> 

</head> 

<body> 


<imdg SrC="DiC8.jpg′ name="DiC"> 

<input type="button" value=" 錯 "onclick= “welcome()"/> 
</body> 

</html> 
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Sample3-3-2 の 表示 


@ Go サン プル 
人 9 03/Sample3-2-2.html ン G > 
5 還 団 












@99 の 9 サン プル 


9 03/Sample3-3-2.htm 


ラン プル 


ボタ ン を 押す と ・・・ 


9 GO9 サン プル 

|| ⑲ 03/ バ ample3-3-2.htm 
e3 四 瑞 
サン プル 


画像 が ラン ダム に 
表示 され ます 


サン ブル 
⑲ 03/Sample3-3-2.htm 


レン ルプ パ ( ビ も 





見 出し テキ スト を ラン ダム に 表示 する 


次 に 、 ペ ー ジ を 表示 する た びに 、 3 種類 の 見 出し テキ スト が ラン ダム に 表示 され る よう に し て 
み ま し ょ う 。 タ イト ル メ ッ セ ー ジ を 配列 に し て お き 、 こ の 添字 を ラン ダム に 指定 する こと に し ま 
す 。 

な お 、 こ の プロ グラ ム で は 、 タ イト ル 画 像 と な る titlejpg を 用 意 し 、 次 の スタ イル シー ト Title. 
css を 使い ます 。 





Title.css 牙 見 出し 用 スタ イル シー ト 


body( 
background-color: #B8988: 
color: 才 FFFFF: 
font-size: 2em: 
font-family: fantasy: 
background-image: url(title.jpg): 
background-repeat: repeat-Xj 
] 
ht{ 
color: 才 FFFFF: 
font-size: 4em: 
font-family: fantasyj 


Sample3-3-3.html 刻 見 出し を ラン ダム に 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Title.css"> 
<title> サ ンプ ル </title> 

</head> 

<body> 

<h1> 

<Script type="text/javascript"> 


var str =["Welcome", "Hell0", "How are yOU?"]: 見 出し テキ スト を 配列 で 準備 し ます 
varr = Parselnt(Math.random() * 3): ョ 
document.writeln(str[r]): 0 以上 3 未満 の ラン ダム な 整数 を 作成 し ます 
か into ラン ダム な 見 出し テキ スト を 作成 し ます 


</body> 
</html> 











ーWi 中 は 加 1dJoSBAB[ 


第 3 章 | JavaScript で 動か そう ! 





| 司 Sample3-3-3 の 表示 


画 【@X 人 2 1 OU 








この プロ グラ ム で は 、 起動 する た びに 違う タイ トル 画像 が 表示 され ます 。 Web サ イト を 開発 
する と き に も 役に立つ グラ ム と な る で し ょ う 。 


























この ペー ジ で は 、 タイ トル テキ スト を 入れ 替え て いる の で は な く 、 Document オ ブ ジ ェ ク 
ト の writeln() メソ ッ ド を 使っ て 、 最初 に ペー ジ 全 体 を 作成 し て いま す 。 テキ スト だ け を 
差し 替え る 方 法 は 、 次 の 節 で 紹介 し まし ょ う 。 


ペー ジ を 操作 し よう 





ンジ ! ペー ジ の 一 部 を 入れ 替え る 
Web ペ ー ジ の 要素 を より きめ こま か く 操 作 す る に は 、HTML 文書 を 操作 する た め の 高 度 
な 知識 が 必要 に な り ま す 。 そ こ で 、 今度 は Web ペ ー ジ を 操作 し な が ら 、 要 素 を きめ 細か く 
操作 する 方 法 を 学ぶ こと と に し まし ょ う 。 


時 ペー ジ 中 の 要素 を 操作 する 


の 


ト 3 回 、 四 
二 上 抱 下 


ペー ジ 中 の 要素 を 操作 し ます 





* 


| 


ペー ジ の 要素 を 操作 する に は 、 次 の よう な プロ グラ ム を 作成 し て いき ます 。 


Sample3-4-1.html 所 ペー ジ の 要素 を 操作 する 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 


<link rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 
<SCript type="text/javascript"> 








ーW 中 は 喧 』1dJoSABT 








function change() 


( 
var e = document.getElementById("1mage"): 
e.setAttribute("src", "pic1.jpg'): 

} 

</script> 

</head> 

<body> 

<img 1d="1mage” Src="DiC8.jDg'> 

<input type="button" value=" 代 " onclick="change()"/> 

</body> 

</html> 


選 Sample3-4-1 の 表示 


@6969 サン ブル Pa @o6@ サン ブル に 


9 03/Sample3-4-1.html 上 ③ 03/Sample3-4-1.html 





Web ペ ー ジ を きめ 細か く 操 作 す る に は 、HTML 文 書 を 操作 する た め の DOM (Document 
Object Model) と 呼ば れる 知識 が 必要 と な り ま す 。 DOM は 、HTML 文書 な ど を 扱う た め の し く 
み で 、 次 の よう に し て Web ペ ー ジ 中 の 要素 を 処理 し ます 。 


Cd レラ 


に を セリ の :: コ ( ジコ 4 まっ 】16 レア ん オブ ジェ クト を 実際 に 
ID 名 な ど を つけ る ジニ ョ ント ミ か ゴル っ 】 操作 する 
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Bl2】 


ここ で は 、 DO を HTML の 操作 を する た め に 使っ て いま す 。 た だ し 、 DOM は HTML 以 
外 に も 使わ れる 一 般 的 な 技術 と な っ て いま す 。 HTML の ほか 、 WWeb の ニュ ー ス ・ 記 事情 
報 を 発信 する た め に 利用 され て いる RSS 文 書 を 操作 する な ど 、 さま ざま な 場面 で 利用 され 
て いま す 。 


是 要素 に ID 名 な ど を つけ る 


DOM は 、HTML 文書 を 木 の 形 を し た 構造 と し て と ら え た も の で す 。 木 の 節 の 部 分 は ノー ド と 
呼ば れ て いま す 。 各 ノ ー ド は 、JavaScript で は オブ ジェ クト (DOM オ ブ ジ ェクト ) と し て 扱わ れ 
ます 。 


時 DOM の 構造 





Tip ら 


DOM の ノー ド は さま ざま な 種類 が あり ます 。 要素 を あら わす オブ ジェ クト 、 要素 に は さ 
まれ た テキ スト を あら わす オブ ジェ クト な ど で す 。 いずれ も ノー ド と し て 統一 的 に 取り 扱 
うこ と が で きま す 。 


DOM オ ブ ジ ェクト に は 、 さ ま ざ ま な 扱い か た が あり ます が 、ID 名 を 使う と 扱い や すく な り ま 
す 。 こ れ か ら 操 作 し よう と する HTML 要 素 の タグ 中 に 、 id="ID 名 "と いう 指定 を 使っ て ID 名 を 
付け て お く の で す 。 

そこ で 、 ここ で は 操作 の 対象 と な る 「img」 要素 に image と いう ID 名 を つけ る こと に し まし た 。 





|@ 
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ID 名 を つけ て お きま す 


<img 1d="image" Src="DiC8.jDg"> 


天 要素 に ID 名 を つけ て お く 


id="image" 
と し ます 


還 DO オブジェ クト を 特定 する 


次 に 、 プ ログ ラム 中 で 、 こ の 要素 を DOM オ ブ ジ ェクト と し て 特定 し ます 。 特 定 す る に は 、 
Document オ ブ ジ ェクト の getElementByld() メソ ッ ド に よっ て つけ た ID 名 を 指定 し ます 。 


ID 名 で オブ ジェ クト を 指定 し ます 


var e = document.getElementById("image"): 
これ で 、 変 数 e に よっ て 画像 を あら わす DOM オ ブ ジ ェクト を 扱う こと が で きま す 。 


一 オブ ジェ クト を 操作 する 


DOM オ ブ ジ ェクト を 取得 し た ら 、 今度 は それ を 操作 し ます 。 こ こ で は オブ ジェ クト の 属性 を 
設定 する 操作 を 行う こと に し ます 。 「img」 要素 の src 属性 を 設定 し て 、 画像 の ファ イル 名 を 指定 
する こと に し まし ょ う 。 こ の た め に は DOM オ ブ ジ ェクト の setAttribute() メソ ッ ド を 使い ます 。 

この よう に ファ イル 名 を 指定 すれ ば 、 画像 が 差し 替え られ ます 。 こ うし て ペー ジ の 中 の 構成 
要素 を 変更 する こと が で きる わけ で す 。 


オブ ジェ クト を 指定 し ます 


e.setAttribute("src", "pic1.jpg"): 





ペー ジ を 操作 し よう 





ン バ を 利用 し て 操作 を 行い ます 。 Web ペ ー ジ 中 の さま ざま な ノー ド を 操作 で きる よう に な っ て 


いま す 。 


時 DOM の 主 な メン バ 


幸 
" 


getElementByld() 
getElementsByTagName() 
createElement(name) 
createAttribute(name) 
createTextNode(text) 
createComment(text) 


id を 指定 し て 要素 を 取得 する 

タグ 名 を 指定 し て 要素 リス ト 取 得する 
要素 名 を 指定 し て 要素 を 作成 する 

属性 名 を 指定 し て 属性 を 作成 する 

テキ スト を 指定 し て テキ スト ノー ド を 作成 する 
テキ スト を 指定 し て コメ ント を 作成 する 
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appendChild(elem) 
removeChild(elem) 
replaceChild(elem1、 elem2) 
innerHTML 


nodeType 


nodeName 
nodeValue 
childNodes 
firstChild 
lastChild 
previousSibling 
nextSibling 


指定 し た ノー ド を 子 ノ ー ド と し て 追加 する 
指定 し た 子 ノ ー ド を 削除 する 
指定 し た 子 ノ ー ド 1 を 子 ノ ー ド 2 で 置き 換え る 
ノー ド 内 の HTML 部 分 


子 ノー ド の リス ト 
最初 の チノ ー ド 
最後 の 子 ノー ド 
前 の 兄弟 ノー ド 
次 の 兄弟 ノー ド 


createAttribute(name) 
removeAttribute(name) 
getAttribute(name) 
setAttribute(name, Value) 
attributes 


指定 し た 属性 名 の 属性 を 作成 する 
指定 し た 属性 を 削除 する 

指定 し た 属性 名 の 属性 値 を 取得 する 
属性 名 と 属性 値 を 設定 する 
属性 の リス ト 


ここ で は 「imgl 要素 の ID 属性 に ID 名 を つけ て DOM で 操作 し 、 画像 の 入れ 替え を 行う 方 
法 を 学び まし た 。 な お 、 3-2 節 で は 「imgl 要素 の name 属 性 に 名 前 を つけ る こと で 画像 の 
入れ 替え を 行う 方 法 を 学ん で いま す 。 この よう に 、 JavaScript を 使う こい くつ か の 方 法 で 
同じ 操作 を 行え る 場合 が あり ます 。 利用 し や すい 方 法 を 選び 、 使い こなせ る よう に な る と 
便利 で し ょ う 。 
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応用 ! DOM で 操作 する 


それ で は 、DOM の メン バ を 使っ て 、 実 際 に ペー ジ の 操作 を 行っ て み ま し ょ う 。 


還 テキ スト を 入れ 替え る 


画像 の クリ ッ ク 時 に テキ スト を 入れ 替え る こと に し ます 。innerHTML プロ パテ ィ に 文字 列 を 
指定 する と 、 テ キス ト を 入れ 替え る こと が で きま す 。 
な お 、 こ の サン プル で は 、 ス タイ ル シ ー ト と し て 前 出 の 「Title.css」 を 使用 し ます 。 


Sample3-4-2.html 諸 テキ スト を 入れ 替え る 


<!DOCTYPE html> 

<html lang="ja"> 

<link rel="stylesheet" href="Title.css"> 
<head> 

<title> サ ンプ ル </title> 

<Script type="text/javascript"> 


f ti Chan 
unction 9e() 入れ 替え る 箇所 の DOM 
{ オブ ジェ クト を 指定 し ます 


Var e = document.getElementById("content'): 


e.innerHTML =" ご 利用 あり が と う ご ざ いま し た 。": 


1 





</Script> 

</head> クリ ッ ク 時 に 入れ 替 
<body> える こと に し ます 
<h1>Hello</h1> 


<pD id="content" onclick="change( ) "> お 客 様 の ご 依頼 に お 答え いた し ます 。</p> 


</body> この 段落 の テキ スト 
</html> を 入れ 替え ます 
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Hello 


お 客 様 の ご 依頼 に お 答え いた し ます 。 


フリック す る と 


Hello 


リト スル ルーン た に 3 の さり の / 中 


テキ スト が 入れ 替わり ます 


innerHTML プロ パテ ィ は 、 指定 し た DOM オ ブ ジ ェクト の 内 部 に 記述 され て いる HTML 
デー タ を あら わし て いま す 。 ここ で は 、 段落 を あら わす 「p] 要素 の 中 の テキ スト を 意味 し 
て いる の で す 。 


胃 説明 を 表示 する 
今度 は 、 画像 に マウ ス を あて た と き (マウ ス オ ー バ ー 時 ) に 、 操作 を し て みる こと に し まし ょ 


う 。 

画像 の マウ ス オ ー バ ー 時 に 説明 テキ スト ノー ド を 追加 し 、 マ ウス が 離れ た ら 削 除 し ます 。 ノ ー 
ド を 追加 する に は 、createTextNode() メソ ッ ド で テキ スト を 作成 し て か ら 、appendChild() メ 
ソ ッ ド で 追加 し ます 。 削除 する に は removeChild() メソ ッ ド を 指定 し ます 。 

















ーW/ 中 は 加 1diJoSBABF 





cript で 動か そう ! 





Sample3-4-3.html 諸 説明 を 表示 する 


<!DOCTYPE html> 

<html lang="]a"> 

<link rel="stylesheet" href="Sample.CSS"> 

<head> 

<title> サ ンプ ル </title> 

<SCript type="text/javascript"> 

function down( ) 

{ 
var e = document.getElementById("description"): 
var t = document.createTextNode( " 写真 の ご 説明 を いた し ます 。") : 
e.appendChild(t): 


) 説明 テキ スト を 作成 し ます 


function up() 


{ 
var e = document.getElementById("description"): 説明 表示 部 を 取得 し ます 
e.removeChild(e.lastChild): 

1 説明 テキ スト を 削除 し ます 


</script> 

</head> 

<body> 

<jimage 1d="bigimage" Src="Dic1.jpg' OnmouSeover="down()*" onmouseout="up()"> 


<div id="description"></div> 5 
Dod マウ ス オ ー バ パー マウ ス ア ウト 時 
090 時 に 処理 し ます に 処理 し ます 


</html> 





ペー ジ を 操作 し よう 





天 Sample3-4-3 の 表示 


@@@e サン ブル 
人 03/Sample3-4-3.htmi レン |@ > 
eS 町 村 









@@6@9 サン ブル 
9 03/Sample3-4-3.html IO」> 
ee mm 枝 


ーih は 尋 1dJoSBABT | ey 


画像 か ら マ ウス を は ず す と 
テキ スト が 削除 され ます 









写真 の ご 説明 を いた し ます 。 


画像 に マウ ス を あて る と テキ スト が 表示 され ます 








| Tips | 


appendChild() に は 追加 する ノー ド 、 removeChild() で は 削除 する ノー ド を 指定 し ます 。 
ここ で は 、 テ キス トノ ー ド を 追加 し 、 最後 の ノー ド (lastChild) を 指定 し て 削除 する こと 
で 、 テキ スト の 入れ 替え を 行っ て いま す 。 


胃 サム ネイ ル か ら 選 択 す る 
小さ な 画像 で ある サム ネイ ル を クリ ッ ク す る こと で 、 大 き な 画 像 を 表示 する よう に し て み ま 
し よう 。 


Sample3-4-4.html 扇 サ ムネ イル か ら 選 択 する 


<!DOCTYPE html> 

<html lang="ja"> 

<link rel="stylesheet" href="Sample.CSS"> 
<head> 

<title> サ ンプ ル </title> 
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<script type="text/javascript"> 
function change(picname ) 
{ き な 画 像 を 取得 し ます 


var e = document.getElementById("bigimage"): 
e.setAttribute("src", picname): ーー | 2 リッ ク し た サム ネイ ル 画 像 を 表示 し ます | 
1 
</SCriDt> 
</head> 
<body> 
<img 1d="bDigimage" SrC="DiCB.jDd"> 


<img 1d="smallimage" src="pic9.jpg′ Onclick="change('pic8.jpg')"> 
<img 1d="smallimage'src="pic1.jp9′0nclick="change('pic1.jpg')"> 
<img 1d="smallimage' Src="Dic2.jpg'′ Onclick="change('pic2.jpg')"> 


サム ネイ ル を 
表示 し ます 


</body> サム ネイ ル 画 像 の ファ 
</html> イル 名 を 渡し ます 


大 き な 画 像 を あら わす 「img」 要素 に bigimage、 小 さ な サ ムネ イル 画像 を あら わす 「img」 要 
素 に smallimage と いう ID 名 を つけ まし た 。 

ここ で は 、 サ ムネ イル 画像 を クリ ッ ク し た と き に 、 大 き な 画 像 (bigimage) に サム ネイ ル 画 
像 の ファ イル 名 (pic0.jpg て.pic2.jpg) を 引き 渡し て 表示 する し くみ に な っ て いま す 。 


居 Sample3-4-4 の 表示 


人 @@9 サン ブル 
| | 9 03/Sample3-4-4.htm| と | の 
| ee 加 右 





クリ ッ ク す る と ・・・ 
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@eo@ サン ブル 
| 人 ⑲ 03/Sample3-4-4.ntml ンー G 


大 き な 画像 と し て 表示 され ます 





ここ で は 、 イ ベン ト 時 の 処理 を する 際 に 、 画像 名 の 情報 を 関数 に 渡し て いま す 。 これ を プロ グラ 
ミン グ の 世界 で は 引数 と いい ます 。 ここ で は 、 change() 処理 を する 際 に 、 フリ ッ ク し た 画像 名 pic0. 
jpg を 渡し て いま す 。 


<img 1d="smalli ="piC9.jpg" lick="ch "pic9.jpg')"> 
img 1d="smallimage' Src="pic9.jpq" Onclick="change('pic9.jpd') 画像 名 を 引数 と し 
て 指定 し て いま す 


渡さ れる 処理 の 側 で は 、 変数 を 使っ て 情報 を 記憶 する こと に な り ま す 。 た と えば 、 こ こ で は 変数 
picname に 記憶 し ます 。 
処理 の 中 で は 渡さ れ た 情報 扱う こと が で きま す 。 ここ で は 、 picname で 取り 扱う こと が で きる 


の で す 。 
画像 名 を 引数 と 
し て 渡し ます 


つま り 、 こん な ふう に 情報 が 渡さ れ 、 処理 され て いる の で す 。 
<img 1d="smallimaqge" Src="pic8.jpg" Onclick="change('pic9.jpg')"> 


function change(picname) 渡さ れ た 情報 (画像 名 ) を 記憶 し ます 
{ 
var e = document.getElementById("bigimage'): 
e.setAttribute("src", picname): 
0 渡さ れ た 情報 (画像 名 ) を 利用 し ます 
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1 


還っ タイ マー を 使 お う ! 








万 ャ レシ ンジ !| 自動 的 に 処理 し よう 

さて 、 こ れ ま で は 、 さ ま ざ ま な タイ ミン シグ で ペー ジ の 操作 を し て きま し た 。 ユー ザー が ダ 
ブル クリ ッ ク で Web ペ ー ジ を 表示 し た り 、 ボ タン を クリ ッ ク す る な ど 、 手動 で 操作 を し た 
と いう イベ ント が 発生 し た と き に 処理 を し た わけ で す 。 

これ に 対し て 、 自動 的 に Web ペ ー ジ が 動作 する よう に する 方 法 が あり ます 。 つま り 、 Java 
Script を 使っ て 、 自 動 的 に 発生 する イベ ント に よっ て 処理 が 行わ れる よう に する の で す 。 

自動 的 に イベ ント を 発生 させ る JavaScript の 機能 を タイ マー と 呼び ます 。 タ イマ ー を 使 
っ て 自動 的 に 処理 を し て みる こと に し まし ょ う 。 





司 ユ ー ザ ー の 操作 に よる イベ ント (上 )、 自 動 で 発生 する イベ ント ( 下 ) 


CuIC ん / 


Fi 


み 
| 
2 


2 


| 
得 
N 
ト つ 


ヨ 
引 | 


に 1 
人 


に っ に は 2 


タイ マー は 次 の よう に 使い ます 。 順番 に みて いき まし ょ う 。 


/ と 


に 


タイ マー を 初期 化す る クイ ミ ジ シグ きだ ど に タイ マー 処理 が 開始 


行わ れる 処理 を 書く され る よう に し て お く 





還 タイ マー を 初期 化す る 

まず 、 タ イマ ー の 初期 設定 を 行い ます 。 初期 化 処理 を 適当 な 処理 名 で まとめ て お きま し ょ う 。 
ここ で は init() と いう 名 前 に し ます 。 

この 処理 の 中 で 、 タ イマ ー が 時 を 刻む よう に 設定 する こと に し ます 。 こ の た め に は 、Window 
オブ ジェ クト の setlnterval() メソ ッ ド を 使い ます 。 


function init() 
( 


window.setInterval("tick()", 3888): 3 秒 ご と の タイ ミン グ を 指定 し ます 


) 


タイ マー に よっ て 発生 する イベ ント を 処理 する 処理 名 は 、 tick() と する こと に し まし ょ う 。 こ 
の 処理 名 は 自分 で 決め る こと が で きま す の で 、 上 の よう に " "で 囲っ て 指定 し て くだ さい 。 

また 、 処 理 が 行わ れる 間隔 を ミリ 秒 で 指定 し ます 。 こ こ で は 、3 秒 (3000 ミリ 秒 ) と 指定 し 
て いる わけ で す 。 


思 タイ マー 処理 を 書く 


それ で は 、 決 め た 処理 名 の 中 に タイ マー 処理 を まとめ まし ょ う 。 3 秒 ご と に 行う 処理 を 書く の 
で す 。 こ こ で は 、 次 の 画像 に 入れ 替え る 処理 を し て いま す 。 番号 が 7 だ っ た 場合 は 0 に 戻し て い 
ます 。 画像 を 次 々 と 表示 する 方 法 を 思い 出し て み ま し ょ う 。 


function tick() 
{ 
せ +: 
if(1 = 7) ji=9: 
var e = document.getElementById("image"): 


e.setAttribute("src", "pic"+ ェ ュ + リ jp9「): 画像 を 入れ 替え ます 
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還 タイ マー を 開始 する 


最後 に 、 タ イマ ー が 開始 され る よう に し て お きま す 。 こ こ で は 、 ペ ー ジ の 本 体 で ある 「body」 
要素 を 読み 込ん だ と き に (onload)、 初 期 化 処 理 を 指定 する こと に し ます 。 こ れ で タイ マー が 開 
始 さ れる こと に な り ま す 。 

実際 に ペー ジ が 読み 込ま れ 、 タ イマ ー が 開始 され る と 、 初 期 設 定 で 指定 し た と お り に 、3 秒 ご 
と に イベ ント が 発生 し て 処理 が 行わ れる と いう わけ で す 。 


</Script> 
</head> 
<body onload="init()"> 





ペー ジ を 読み 込ん だ タイ ミン グ 
で タイ マー 処理 を 開始 し ます 


それ で は 、 こ の 手順 に し た が っ て タイ マー を 使い 、3 秒 ご と の タイ ミン グ で 画像 を 入れ 替え て 
み ま し ょ う 。 自動 的 に 入れ 替わる 画像 を 確認 し て みて くだ さい 。 


Sample3-5-1.html 啓 タイ マー を 使う 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet' href="Sample.CSs"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 


Var 1=6: 
function init() タイ マー の 初期 化 処 理 を 行い ます 
{ 

window.setInterval("tick()", 3988): タイ マー を 設定 し ます 


] 


function tick() 


{ 
1++: 
if(1 = 7) ji=6: 
Var e = document.getElementById("1mage"): ID 名 で オブ ジェ クト を 指定 し ます 
e.SsetAttribute("src", "pic"+ ェ 1+ リ "jpg"「): 
) 画像 を 入れ 替え ます 
</Script> 
</head> 






ペー ジ を 読み 込ん だ タイ ミン グ 


<body onload="init()"> で タイ マー 処理 を 始め ます 


<img 1d="1mage" src="pic9.jpg"> 
</body> 
</html> 


3-5 | タイ マー を 使 お う ! 





Sample3-5-1 の 表示 


肛 ⑲ 03/sample3-5-1.html 遇 3 03/Sample3-S-1.html と 
円 吾 避 守 
サン プル 





3 秒 ご と に 画像 が 替わり ます 


介 03/Sample3-5-1.html C Gi 人 03/Sample3-5-1.htm| 


所 器 回 
ラン プル 





| ②③ 03/Sample3-5-1.html に | 人 03/Sample3-5-1.html C 
四 款 に 
サン プル 














の 


ーVi 中 は 肝 1diJoSBABT 





電 う -6 スラ イ ド シ ョ ー に し よう 





ヒネ コワ ララァ と を と た El [ 補 : 表 ) 


と こま で ペー ジ 中 の 要素 を 入れ 替え た り 、 タ イマ ー を 使っ て 自動 的 に 処理 を する 方 法 を 
紹介 し まし た 。 そ こ で この 章 の 最後 に 、 こ れ ま で に 紹介 し た 方 法 を 使っ て 、Web ペ ー ジ 上 
に スラ イド ショ ー を 作成 し て み ま し ょ う 。 

次 の よう に 、 大 き な ス ライ ド シ ョ ー 画 面 と 小さ な サム ネイ ル 画 像 か ら 構成 する スラ イド シ 
ョ ー と し ます 。 サ ムネ イル に 表示 され て いる 画像 を 、 タ イマ ー で 順番 に 表示 し ます 。 タ イマ 
ーー 操作 を 行う ボタ ン も つけ る こと に し まし ょ う 。 





還 ス ライ ド シ ョ ー 


@@oG@9 サン ブル 
| し | ③ 03/Sample3-6-1.html C 自 1 の 」 


や 叫 


ッッ ラル 








スラ イド ショ ー 
を 作成 し ます 


タプ 画面 全体 を 設計 する 


まず 、 ス ライ ド シ ョ ー の 画面 を 設計 し まし ょ う 。 ス ライ ド シ ョ ー の メイ ン 画 面 ・ ナ ビ ゲ ー シ ョ 
ン ボ タン ・ サ ムネ イル 画面 に 分 割 し て 考え ます 。 こ の よう に Web ペ ー ジ を 複数 の 範囲 に わけ る 
場合 に は 、HTML の 「div」 要素 の タグ を 使い 、 各 範囲 に ID 名 を つけ て お く 方 法 が よく 利用 され 
ます 。 





邊 div 要 素 で 画面 を 分 割 し て 考え る 


スラ イド ショ ー 画 面 
<div id="slideshow"> 


ナビ ゲー ショ ン ボ タン <div id="navigation"> 


サム ネイ ル <div id="thumnail'> 


ダグ プ サム ネイ ル 部 分 を 設計 する 


サム ネイ ル 部 分 に は 、15 枚 の 画像 を 表示 する こと に し ます 。 画像 の 数 が 多く な る た め 、 
JavaScript の 繰り 返し 文 を 使っ て サム ネイ ル 画 像 を 表示 する こと に し まし ょ う 。 15 行 の 「img」 
要素 を 書か な く て も 、 繰 り 返し 文 を 使え ば 、 簡 単に 表示 する こと が で きま す 。 多く の サム ネイ ル 
画像 を 簡単 に 表示 する 方 法 を 思い 出し て み ま し ょ う 。 





for(var j=8: i<15: jr+){ 
document.writeln( "<jimg class="smallimage" Src="DiC + 1+'.jD9"> ): 


サム ネイ ル を 繰り 返し 表示 し ます 


な お 、 サ ムネ イル は 、 画像 を 縮小 し て 表示 する こと に し ます 。 そ こ で 、 画像 の 大 き さ を スタ イ 
ル シ ー ト 中 に 指定 する こと に し まし ょ う 。 


) 


.Smallimaget 


width: 48Dx: 机 像 を 縮小 表示 し ます 
height: 38px: 2 


] 











ーJr き 因 d1dHoSEAT 








E ま た 


EN だ に 1 の) 生 リリ 


ププ ボタ ン の 動作 を 設計 する 


次 に 動作 の 設計 で す 。 ス ター ト ボ タン ・ ス トッ プ ボ タン の 動作 を 作成 し する こと に し ます 。 ス 
ター ト ボ タン を 押し た と き に タイ マー 処理 を 開始 し 、 ス トッ プ ボ タン を 押し た と き に タイ マー 処 
理 を 終了 し ます 。 各 ボ タン の イベ ント と 処理 名 を 指定 し て くだ さい 。 


Var k=8: 
Var t=null: 


function stat() スタ ー ト ボタ ン を 押し た と き の 処 理 で す 
( 

if(t == null) 

t = window.setInterval("tick()", 3888): 

り 
function stop() スト ッ プ ボタ ン を 押し た と き の 処 理 で す 
{ 

window.clearInterval(t): 

t = null: 


スタ ー ト 時 の 処理 を 行い ます 
<input type="button" value=" 借 "onclick="stat( ) "/> 


<jinput type="button" value=" 較 "onclick="stop() "/> スト ッ プ 時 の 処理 を 行い ます 


| 


Tip ら 


Window オ ブ ジ ェクト の clearlnterval() メ ソ ッ ド を 使う こと で 、 タ イマ ー を スト ッ プ す 
る こと が で きま す 。 この た め に は タイ マー 開始 時 に 戻さ れる オブ ジェ クト を 変数 (ここ で 
は 1) に 記憶 し て お き 、 この 変数 を 指定 し て スト ッ プ し ます 。 var を 使っ た 変数 t の 準備 は 
各 処 理 の 外側 に 書く よう に し て くだ さい 。 


グプタ イマ ー を 設計 する 


それ で は 、 メ イン と な る タイ マー の 処理 を 設計 し まし ょ う 。 変数 k が 15 で あっ た と き に 0 に 


戻る こと に し ます 。 


function tick() 次 の 画像 番号 を 指定 し ます 
{ 
K++: 


if(k = 15) kc6: 画像 番号 が 最後 の 番号 を こえ た ら 最 初 に 戻り ます 








スラ イド ショ ー に し よう 


var e = document.getElementById( "bigimage" ) : 大 きい 画像 を あら わす 要素 を 指定 し ・・・ 
e.setAttribute("src", "Dic" +k+".jPD9"): 
1 画像 を 入れ 替え ます 


恒 画像 を 次 々 と 表示 する 





クダ スラ イド ショ ー を 完成 させ よう 


最後 に 、 プ ログ ラム を 完成 させ る こと に し まし ょ う 。 完成 し た スラ イド ショ ー の ボタ ン を 操作 
し 、 正 し く 動 作 し て いる か 確認 し て みて くだ さい 。3 秒 ご と に スラ イド ショ ー が 切り 替 わ れ ば 完 
成 で す 。 





Sample3-6-1.html 上 邊 スラ イド ショ ー 


<!DOCTYPE html> 

<html 1ang="ja"> 

<head> 

<link rel="stylesheet' href="SlideShow.css"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 

Var k=9: 

Var t=null: 


function stat() スタ ー ト ボタ ン を 押し た と き の 処 理 で す 


( 


if(t == null) 
t = window.setInterval("tick()", 3888): 


) 


function stop() スト ッ プ ボタ ン を 押し た と き の 処 理 で す 











ーー 届き 加 1dIJoSBABT 


window.clearInterval(): 
t = nulli 
function tick() 


( 次 の 画像 番号 を 指定 し ます 
ki 





画像 番号 が 最後 の 番号 を 
こえ た ら 最 初 に 戻り ます 









if(k == 15) k=6: 
Var e = document.getElementById("bigimage'): 
e.setAttribute("src", "pic"+k+'.jpg"): 
画像 を 入れ 替え ます 
</script> 
</head> 
<body> 


<div id="slideshow"> 


央 


<img 1d="bDigimage" Src="Dic9.jDg'> スラ イド ショ ー 画 像 を 表示 し ます 
</diV> 

<div 1d="navigation"> スタ ー ト 時 の 処理 を 行い ます 
<input type="button" value=" 備 "onclick="stat()"/> 

<input type="button" value=" 較 "onclick="stop()"/> スト ッ プ 時 の 処理 を 行い ます 
</div> 


<div id="thumbnail"> 


for(var 1=9: 1<15: i++) { 

document.writeln('<img class="smallimage' src="DiC _+ 1+'.jD9">「): 
| 
</script> 


</diV> 
</body> 


</html> 


SlideShow.css 置 スラ イド ショ ー の スタ イル シー ト 


body( 
background-color: 88898: 
color: 盾 FFFFF: 
font-size: 2em: 
font-family: fantasyi 








-Smallimaget 
width: 49px: 
height: 3px: 


Sample3-6-1 の 表示 


CZ/ 


画像 を 縮小 表示 し ます 





ョ ンプ 





3-6 | スラ イド ショ ー に し よう 





ボタ ン で 操作 する 


い 


ーVi は 辱 1dIJoSBABT 











第 4 章 


JaVaSC「IDt で 
本 し ek に つ | 


Web ペ ー ジ か ら ユ ー ザ ー に デー タ を 入力 し て も らい 、 Web サーバ ー に 
送信 する こと が で きま す 。 こ の と き 、JavaScript を 使っ て 入力 デー タ の 
チェ ッ ク を 行っ た り 、 Web ペ ー ジ に 確認 表示 し た りす る こと が で きま す 。 
この 章 で は 、 JavaScript を 使っ た チェ ッ ク 機 能 を 学び まし ょ う 。 


入力 フォ ー ム を 作ろ う 





邦 ャ レン シンジ! 入力 で きる よう に し よう 

Web ペ ー ジ に は 、 ユ ー ザ ー が デー タ を 入力 する た め の 部品 を 配置 する こと が で きま す 。 
この 部 品 を 配置 する た め の HTML 要素 を フォ ー ム と 呼び ます 。 

JavaScript を 使え ば 、 フ ォ ー ム を 活用 し て いく と と が で きま す 。 この節 で は フォ ー ム を 活 
用 し て みる こと に し まし ょ う 。 


還 フ ォ ー ム 
入力 ・ 送 信 可 能 


な フォ ー ム を 
作成 し ます 




















たこ ム 部 品 2 の 沖 害 
フォ ー ム に は 、 ユー ザー が キー ボー ド や マウ ス を 使っ て デー タ を 入力 する た め の 部 品 を 配置 し 
ます 。 フ ォ ー ム 部 品 に は 、 次 の よう な 種類 が あり ます 。 








屋 フォ ー ム 部 品 


入力 フォ ー ム を 作る ろう 


DRAM 


プル cm 


テキ スト ボッ クス 


テキ スト エリ ア 


チェ ッ ク ボ ックス 


ラジ オ ボ タ ン 


ドロ ッ プ ダウ ン 
メニ ュー 


リス ト ボ ックス 
メニ ュー 
ボタ ン 

送信 

リセ ッ ト 

ファ イル 


隠し 属性 


鉛筆 


| 多 生 や コン バス を 注文 し ます 


加 コ ン パ ス ロボ ー ル ペン 


コン パス @ ポ ボー ル ペ ン 





リセ ッ ト 


ファ イル を 選択 


これ まで の 章 で も 、 フ ォ ー ム 部 品 の 一 種 さ ある ボタ ン を 使っ て きま し た 。 フ ォ ー ム 部 品 
は 、 単独 で も 使え ます が 、 Web サ ー バ ー に デー タ を 送信 する た め に は 、 部 品 を フォ ー ム 要 
素 の 中 に 配置 する こと が 必要 で す 。 この 章 で は フォ ー ム 要素 の 中 に 部 品 を 配置 し て デー 
タ を 送信 する こと に し ます 。 E 


<form name=" 名 前 " action="URL" 
method=" 種 類 "> 


<input type="text" name=" 名 前 " value=" 値 " /> 


<textarea name=" 名 前 " cols="1 行文 字数 " 
rows=" 行 数 " ></textarea> 


<input type="checkbox" name=" 名 前 " 
value=" 値 " > 表示 </input> 


<input type="radio" name=" 名前" value=" 値 "> 
表示 </input> 


<select name=" 名 前 "> 
<option value=" 値 "> 表示 </option> 
</select> 


<select name=" 名 前 " size=" 値 "> 
<option value=" 値 "> 表示 </option> 
</select> 


<input type="button" value=" 値 " /> 
<input type="submit" value=" 値 " /> 
<input type="reset' value=" 値 " /> 


<input type="file" name=" 名 前 "/> 


<input type="hidden" name=" 名 前 " 
value=" 値 "/> 





ーJi で ざき SH 由 1dH2SBABT | 











それ で は 、 フ ォ ー ム の 使い 方 に つい て みて お きま し ょ う 。 フ ォ ー ム は 、 一 般 的 に 次 の よう な 手 
順 で 使い ます 。 


のみ . の 2 
送信 時 に 処理 を フォ ー ム の 値 を 


pe だ た さら 】 ト に か: ま っ 】 調べ る 処理 を 行う 





還 フォ ー ム 要素 を 作成 する 


フォ ー ム は 、HTML の 「form」 要素 を 使っ て あら わし ます 。 フ ォ ー ム 部 品 は フォ ー ム の 中 に 配 
置 し ます 。 「form」 要素 の 中 に 書く わけ で す 。 

通常 、 送信 デー タ を 特定 する た め に 、 フ ォ ー ム と その 部 品 に は 、name 属性 を 使っ て 名 前 を つ 
け て お きま す 。 名 前 は わか りや すい も の を つけ て か まい ませ ん 。 

た と えば 、 下 の 場合 は フォ ー ム に myform と いう 名 前 を つけ 、 テ キス ト ボ ックス に name、 ラ 
ジオ ボタ ン に gen と いう 名 前 を つけ て いま す 。 


フォ ー ム を 配置 し ます 
フォ ー ム に 名 前 を つけ ます 


<form name="myform' action="Sample4-1-1.html" onsubmit="return check()"> 


<input type="text" name ="name"/> フォ ー ム 内 に フォ ー ム 部 品 を 配置 し ます 
<input type="radio' value=" 男性" name ="gen"/> 男 性 
フォ ー ム 部 品 に 
名 前 を つけ ます 












<input type="radio" value=" 女性 "name ="gen"/> 女性 


<input type="submit" value=" 送信 "/> 
</form> 


還 フォ ー ム 送信 時 に 設定 処理 を する 


フォ ー ム は 、 部品 に 入力 し た デー タ を 送信 する 際 に 処理 を 行う こと が 多い た め 、 通 常 、 部 品 


を あら わす タグ に 、onsubmit=" 処 理名 ()" と 指定 し て 処理 を 行う よう に 指定 し ます 。 こ こ で は 、 
check() 処理 を 行う こと を 指定 し て み ま し た 。 





4-1 入力 フォ ー ム を 作る 





<form name="myform" action="Sample4-1-1.html" onsubmit="check( ) "> 


2 


action に は デー タ の 送信 先 を 指定 し ます 。 通常 は 、 デー タ を 受け 取る Web サーバー 上 の 
プロ グラ ム の URL を 記述 し ます が 、 本 書 で は 送信 元 と 同じ 場所 (Sample4-X-X.htmU) を 
指定 する こと に し ます 。 


還 フォ ー ム の デー タ を 調べ る 

この よう に し て お く と 、 送 信 時 に 行わ れる 処理 の 中 で 、 フ ォ ー ム 名 . フ ォ ー ム 部 品名 .value と 
いう 指定 を 使い 、 フ ォ ー ム て で 送信 され る デー タ を 調べ る こと が で きま す 。 た と えば 、myform フ 
ォ ー ム 内 の テキ スト ボッ クス name の 値 を 変数 n に 記憶 する に は 、 次 の よう に 指定 し ます 。 


function check() 


{ 
記 5 フォ ー ム と その 部 品 の 名 前 か ら 
Var n = myform.name.Value: 値 を 調べ る こと が で きま す 


ーVw で YsH ボ 1duoSBAeT | 


さ 


ーー ピー 


それ で は 、 フ ォ ー ム に 入力 され た デー タ を 調べ て み ま し ょ う 。 送信 ボタ ン を 押し た と き に 、 フ 
ォ ー ム の デー タ を ウイ ンド ウ に 表示 する こと に し ます 。 な お 、 こ の 章 で は 次 の スタ イル シー ト を 
使い ます 。 


Form.css 時 フォ ー ム 用 の スタ イル シー ト 


body{ 
background-color: 才 FFFFF: 
color: #B899: 
font-family: fantasyi 

] 

tablet 
background-color: #6Bcdaa: 
border: 寺 FFFFF 2px solidj 





oglo と ニャ ルン 4 デン 】 ル | 





td{ 
width: 298px: 
border: 盾 FFFFF 1px solidi 


Sample4- 1 -1 .htm 刻 フォ ー ム の 入力 を 調べ る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Form.CSS"> 
<title> サ ンプ ル </title> 

<script type="text/javascript"> 
function check() 


( 
Var n = myform.name.value: フォ ー ム 部 品 の 値 を 調べ ます 
window.alert(n + "さん で すね 。『 ) : フォ ー ム 部 品 の 値 を 表示 し ます 
1 


</Script> 

</head> 

<body> 

<form name="myform" action="Sample4-1-1 .html" onsubmit="check()"> 
<table> 

<tr> 

<td> お 名 前 </td> 

<td> 

<input type="text" name ="name"/> 

</td> 

</tr> 

く <tr> 

<td> 性 別 </td> 

<td> 

<jnput type="radio' value=" 男 性 " name ="qgen' checked/> 男 性 
<input type="radio' value=" 女性" name ="gen"/> 女 性 
</td> 

</tr> 

</table> 

<input type="submit" value=" 送信"/> 

</form> 

</body> 

</html> 





ら 











@@69@ サン プル っ 
⑲ 04/Sample4-1-1.html 














> ニ JavaScript 
ーー グ ⑯ た か は し さん で すね 。 


フォ ー ム 部 品 の 値 を 表示 し ます 








フォ ー ム の 送信 Column 


こ で は JavaScript を 使っ て 、 送信 する デー タ を Web ク ライ アン ト 上 で 調べ る し くみ に な っ て 
内 本 Web ペー ジ を みて いる ユー ザー の 側 で チェ ッ ク を 行っ て いる わけ で す 。 

し か し 、 Web サ イト を 実際 に 設計 する 場合 に は 、 送信 デー タ を Web サー バー 上 で 調べ る こと が 
必要 と な る で し ょ う 。 実際 に 送信 され た デー タ を Web サー バー 側 で 調べ る に は 、 Web サ ー バ ー 上 
で 動作 し 、 データ な ど を チェ ッ ク す る プロ グラ ミン グ 環 境 が 必要 で す 。 

Web サ ー バ ー 上 で 動作 する プロ グラ ミン グ 環 境 ・ 言 語 と し て は 、 PHP な ど が 使わ れ て いま す 。 
JavaScript は 、 ユ ー ザ ー 側 の 環境 で チェ ッ ク を 行う っ も の で す 。 この た め JavaScript は 、 送信 時 に 簡 
単 な チ ェ ッ ク を する 目的 で 使わ れる こと が 多く な っ て いる こと に 注意 し て くだ さい 。 
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己 


チャ レシ ジ ! フォ ー ム の チェ ッ ン ク 機 能 を 充実 させ る 
JavaScript を 使っ て 、 フ ォ ー ム の 送信 時 に フォ ー ム に 入力 し た デー タ の 値 を 調べ る こと 
が で きま し た 。 
実際 に は 、 こ の フォ ー ム の 入力 値 に つい て いろ いろ な チェ ッ ク を 行っ て か ら 、Web サ ー 
バー に デー タ を 送信 する 機会 が 多く な っ て いま す 。 そ こ で 、 今度 は フォ ー ム の 値 を チェ ッ ク 
し て 送信 処理 を 行う よう に し まし ょ う 。 





居 送信 時 に チェ ッ ク す る 


チェ ッ ク し て 
S、 価 する こと が 
sg た 


まず 、 フ ォ ー ム に 値 が 入力 され て いる か を チェ ッ ク し て み ま し ょ う 。 値 が 空 に な っ て いる 場合 


に 、「 入 力 し て くだ さい 。」 と 表示 する よう に し て み ま す 。 入 力 さ れ て いた 場合 に は 、 メ ッ セ ー ジ 
を 表示 し て 送信 し ます 。 


Sample4-2-1.html 盾 入力 を チェ ッ ク す る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Form.CcSs"> 
<title> サ ンプ ル </title> 

<SCript type="text/javascript"> 





入力 を チェ ッ ク し よう 


function check() 
( 


Var n = myform.name .value: 


if(n 王 フォ ー ム の 入力 が 空 だ っ た と き に は ・…・ 
window.alert(" 入 力 し て くだ さい 。『): 
res = false: 
送信 を キャ ン セ ル し ます 
else( 


window.alert(" 送信 し ます 。"): 入力 され て いた 場合 に は ・・・ 
reS = true: 







) メッ セー ジ を 表示 し ・・ 





return 「6Si 
' 
</Script> 
</head> 
<body> 


<form name="myform' action="Sample4-2-1.html" onsubmit="return check()"> 


<table> 較べ 
の 処理 結果 を 調べ る 

場合 に 指定 し ます 
<td> お 名 前 </td> 


<td> 

<input type="text" name ="name"/> 

</td> 

</tr> 

く <tr> 

<td> 性 別 </td> 

<td> 

<input type="radio' value=" 男 性 " name ="gen' checked/> 男 性 
<input type="radio" value=" 女 性 " name ="gen"/> 女 性 
</td> 

</tr> 

</table> 

<jnput type="submit" value=" 送信 "/> 

</form> 

</bodV> 

</html> 


フォ ー ム に 入力 し な か っ た 場合 と 、 入 力 し た 場合 の それ ぞ れ に つい て 確認 し て みて くだ さい 。 
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画 Sample4-2-1 の 表示 
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JavaScript 
入力 し て くだ さい 。 
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そう で な い 場 合 に ・・・ 


ーー 所 ご | 士 2 


と と で は 、 文 を 使っ て 入力 され て いな か っ た 場合 に だ け 、 送信 を キャ ン セ ル し て いま す 。 フ 
ォ ー ム に 入力 され て いた 場合 に は 送信 し て いま す 。 場合 分 け を し て いる の で す 。 
ff(n 三 "")( 


空 だ っ た と き に は ・・・ 
window.alert(" 入 力 し て くだ さい 。”): 


reS = false: 入力 し て も ら う よう に し ます 
else{ そう で な い 場 合 に は ・・・ 


window.alert(" 送信 し ます 。") : 


reS = trUe: { ーーーーー | mss | 
1 


return reS: 








TiP ら 


onsubmit で は 、 指定 し た 処理 が 「true (OK) 」 と いう 結果 を 戻し た と き 、 送信 が 行わ れ 
ます 。 「false (OK で は な い ) 」 を 戻し た 場合 に は 送信 は 行わ れ ま せん 。 ここ で は 、 この こ 
と を 利用 し て 送信 ・ キ ャ ン セ ル 処 理 を 行っ て いま す 。 return は 結果 を 戻す た め の 指定 で 
す 。 onsubmit"return 処理 名 ()" と 指定 し て お きま す 。 





の 方 法 で 、 郵 便 番号 や メー ル ア ド レス の チェ ッ ク が で きま す 。 


革 郵便 番号 


入力 し た 値 が 、 郵便 番号 の 形式 に な っ て いる か を チェ ッ ク し て み ま す 。 そ れ に は 、 次 の よう に 
形式 パタ ー ン を 管理 する RegExp オ ブ ジ ェクト を 作成 し ます 。 


Sample4-2-2.html 講 郵便 番号 の パタ ー ン を チェ ッ ク す る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<Iink rel="stylesheet' href="Form.Css"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript"> 
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第 4 章 





EN に gl っ ま と ー ャ ン 4 デン 】| 


function check() 
{ 
var p = new RegExp("^[9-9](3}-[9-91(419"。 1 ): 
Var S = myform.address.value: 
var reSs = S.match(Dp): 






郵便 番号 形式 で ある か を チェ ッ ク 
し て 送信 する こと が で きま す 


if(res == null){ 
window.alert(" 入力 が 誤っ て いま す 。『) : 
res = false: 
1 
elset 
window.alert(" 送信 し まし た 。『): 
FeS = truei 
1 
return 「eSj 
] 
</Script> 
</head> 
<form name="myform' action="Sample4-2-2.html" onsubmit="return check()> 
<table> 
<tr> 
<td> 郵便 番号 </td> 
<td><input type="text" name ="address"/></td> 
</tr> 
</table> 
<input type="submit" value=" 送信 "/> 
</form> 
</body> 
</html> 


String オ プ ジ ェ クト の match() メソ ッ ド は 、 入 力 デ ー タ が RegExp オ ブ ジ ェクト の パタ ー ン が 
一 致し な か っ た 場合 に 、null と いう 結果 を 戻し ます 。 そ こ で 、 こ こ で は 結果 が null で ある か どう 


か を 調べ て 、 デ ー タ の チェ ッ ク を し て いる の で す 。 


「null (ヌル ) 」 は 、 オブジェ クト が 存在 し な いこ と を あら わす 指定 で す 。 プロ グラ ム の 世 
界 で は よく 使わ れる 指定 と な っ て いま す 。 


ウレ テテ ルン 4 の 





呈 Sample4-2-2 の 表示 
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JavaScript 
入力 が 誤っ て いま す 。 
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還 メー ル ア ド レス 


メー ル ア ド レス も 同様 の 方 法 で チェ ッ ク す る こと が で きま す 。 メ ー ル アド レス の 形式 に な っ て 
いる か どう か を チェ ッ ク す る に は 、check() 処理 内 を 次 の よう に し ます 。 
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Sample4-2-3.html 時 メー ル ア ド レス の パタ ー ン を チェ ッ ク す る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<IHink rel="stylesheet" href="Form.CSS"> 

<title> サ ンプ ル </title> 

<Script type="text/javascript"> 

function check() 

{ 
var D = new RegExp("^[9-9a-zA-z_\.-]+@[8-9a-zA-z_\.-]+\.[a-ZA-Z]+$", 1) 
Var S = myform.address.value: 
var res = S.match(p): 





if(res == null){ 
window.alert(" 入力 が 誤っ て いま す 。『) : 
res = false: 
) 
elset 
window.alert(" 送信 し まし た 。"): 
res = true: 
1 
return reSi 
) 
</SCript> 
</head> 
<body> 
<body> 
<form name="myform" action="Sample4-2-3.html' onsubmit="return check()"> 
<table> 
く tF> 
<td> メー ル ア ド レス </td> 
<td><input type="text" name ="address"/></td> 
</tr> 
</table> 
<input type="submit" value=" 送信 "/> 
</form> 
</body> 
</html> 





時 Sample4-2-3 の 表示 
















メー ル ア ド レス 形式 で な か っ た 場合 に ・・・ 


送信 を キャ ン セ ル し ます 


入力 が 誤っ て いま す 。 





サン ブル 





| ⑲ 04/Sample4-2-3.html 




















ーJw で YSha1duoSBAeT | は 











5 
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EN だ に Yaa) 表 移 キャ グン 4 デル | 


バターン チェ ッ ク す 
ここ で は 次 の よう に パタ ー ン を 指定 し て 、 メ ー ル アド レス や 郵便 番号 の チェ ッ ク を 行っ て いま 
宣 。 


先頭 3 けた の 数 値 ハイ フン 4 けた の 数 値 末尾 


に 


^[9-9](3}-[6-91{4}$ 


| 


郵便 番号 で ある か チェ ッ ク し ます 


数 値 また は アル ファ ベッ ト メー ル ア ド レス で ある 
先頭 また は 指定 記号 の 繰り 返し か チェ ッ ク し ます 


^[9-9a-zA-Z_\.-]+@[9-9a-ZA-Z_\.-]+\.[a-zZA-Z]+$ 


@ マ ー ク ピリ オド アル ファ ベッ ト 末尾 
の 繰り 返し 


パタ ー ン を 作成 する た め に は 、 高 度 な 知識 が 必要 で す が 、 代 表 的 な パタ ー ン を いく つか 覚え 
て 使え る よう に な っ て お く と 便利 で す 。 た と えば 、 次 の よう な パタ ー ン を 使っ て フォ ー ム に 入力 
され た デー タ の 形式 を 調べ る こと が で きま す 。 


選 パタ ー ン の 例 
[012345] 012345 の いずれ か 3 
[0-91] 09 の いずれ か 5 
[A-Z] AZ の いずれ か B 
[A-Za-z] AZ、a…z の いずれ か b 
[^012345] 012345 で は な い 文字 6 
[O1][01] 00、01、10、] 1 の いずれ か 01 
[A-Za-z][0-9] アル ファ ベッ ト 1 つ に 数 字 が 1 つ 続 く A0 
正規 表現 < Column 


パタ ー ン を つく る 表記 は 、 正規 表現 と 呼ば れ て いま す 。 ここ で 使っ た RegExp オ ブ ジ ェクト は 、 正 
規 表現 の 機能 を まとめ た オブ ジェ クト で す 。JavaScript の 正規 表現 の くわ し い 利 用 方 法 に つい て は 、 
「 や さ し い Web ア プリ プロ グラ ミン グ ] (SB クリ エイ ティ ブ ) な ど を 参考 に し て みて くだ さい 。 





ォ ー ム を 使っ て ユー ザー に 商品 を 選択 させ 、 選択 し た 商品 を Web ペー ジ 上 に 
確認 表示 する よう に し て み ま し ょ う 。 フ ォ ー ム 部 品 の リス ト ボ ックス メニ ュー を 使っ て 商品 
を 選び 、 表 に 表示 する こと に し ます 。 


恒 確認 表示 する 


りん ご 


EE 
| 
1 





一 | ーー ヽ ー っ 
還 選択 フォ ー ム を 設計 する 

これ まで の 知識 を 生か し て 作成 し て み ま し ょ う 。 ま ず 、 入 力 デー タ を 受け 付け る た め の フ ォ ー 
ム を 設計 し ます 。 


フォ ー ム 上 の ボタ ン を クリ ッ ク し た と き に 、add() に まとめ た 処理 を 行う よう に し まし ょ う 。 
フォ ー ム の 下 に は 表 を 付け 加え る こと が で きる よう に 、「table」 と いう ID 名 を つけ た 表 を 配置 
し て お きま す 。 


<form name="myform' action="Sample4-3-1 .html"> 
<select name ="items" Size="3"> 

<option value="” りん ご "> りん ご </option> 

<option value=" みか ん "> みか ん </option> 

<option value=" も も "> も も </option> 











で 
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Script で チェ ッ ク し よ 


</select> 


<input type="button" value=" 追加 " onclick="add( ) "/> クリ ッ ク 時 に 処理 し ます 


</form> 


<table id="table"> この 表 に 表示 し ます 


</tahle> 
この よう に 名 前 を つけ て お け ば 、 フ ォ ー ム の 値 は 次 の よう に 得る こと が で きま す 。 


Var itm = myform.1tems.value: 
フォ ー ム の デー タ を 得る こと が で きま す 


還 フォ ー ム の 値 を 得る 





りん ご 

| みか ん | 

| も も | 

| | | 追加 | 
昌 表 に 1 行 追加 する 


表 に 1 行 付け 加え る た め 、 表 の ID を 指定 し て DOM オ ブ ジ ェクト を 取得 し ます ( 夫 )。 追加 す 
る 「tr」 要素 ( 行 )、「td」 要素 (セル ) を 作成 し まし ょ う (@・@)。 さ ら に 、 フ ォ ー ム の 値 を 指定 


し て テキ スト を 作成 し ます (@)。 


最後 に 、 作 成 し た テキ スト を セル に 追加 し 、 こ れ を さら に 行 、 テ ー ブ ル の 順に 追加 する こと に 


し ます ()。 


テー ブル を 作成 し ます 
var e = document.getElementById("table"): 
Var elmr = document.createElement("tr"): ら 行 を 追加 し ます 


Var elmd = document.createElement("td" ): 


var txt = document.createTextNode(itm): ⑥ セル を 追加 し ます 

elmd.appendChild(txt) : 5 

NR の 4 〇 フォ ー ム の 値 か ら テ キス ト を 作成 し ます 
9 dEhil H 

oo 作成 し た ノー ド を 順に 追加 し ます 





呈 表 に 1 行 追加 する 














それ で は 、 手順 を まとめ て ペー ジ を 作成 し て み ま し ょ う 。 追加 ボタ ン を 押す た びに 、 商 品名 
が 表 に 追加 され る こと が わか る で し ょ う 。 


Sample4-3-1.html 盾 商品 名 を 表示 する 


<!DOCTYPE html> 
<html lang=" ja"> 
<head> 
<link rel="stylesheet" href="Form.CSS"> 
<title> サ ンプ ル </title> 
<Script type="text/javasCript"> 
var jitemlist =[" り ん ご ", "みか が か ん", "も も "]: 
function add() 
{ 
Var itm = myform.1items.value: 


Var e = document.getElementById("table"): 
Var elmr = document.createElement("tr'): 
var elmd = document.createElement("td"): 
var txt = document.createTextNode (itm): 
elmd.appendChild(txt) : 
elmr.appendChild(elmd): 
e.appendChild(elmr): 

| 

</Script> 

</head> 

<body> 

<form name="myform' action="Sample4-3-1 .html"> 

<select name ="items” Size="3"> 

<option value=" りん ご "> りん ご </option> 
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<option value=" みか ん "> みか ん </option> 

<option value=" も も "> も も </option> 

</select> 

<input type="button" value=" 追 加 " onclick="add( ) "/> 
</form> 

<table id="table"> 

</table> 

</body> 

</html> 


時 Sample4-3-1 の 表示 
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ボタ ン を 押す と ・・・ 
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商品 が 追加 され ます 











04/Sample4-3-1.html 








チャ レン ジ 『!| 商品 価格 を 計算 し よう 
商品 を 確認 表示 する こと が で きた の で 、 今度 は 選択 し た 商品 と 個数 に つい て 価格 を 調べ 、 
合計 額 を 計算 し て 確認 表示 する 機能 を 作成 し て み ま し ょ う 。 





還 計算 と 確認 


りん ご ミ ょ は - る 追加 みり 字 合計 











まず 、 商 品 と 価格 の 対応 を あら わす 価格 表 を 考え て み ま し ょ う 。 こ こ で は 、 価 格 表 を あら わ 
す た め に 、JavaScript の 連想 配列 と いう も の を 使う こと に し ます 。 連想 配列 は 、 名 前 を 指定 し 
て 値 を 取り 出す こと が で きる 配列 で す 。 「 名 前 : 値 」 と いう デー タ を 格納 し ます 。 こ の 配列 を 使 
うと 、 名 前 を 指定 し て 値 を 取り 出す こと が で きま す 。 こ こ で は 、 商 品名 を 指定 し て 価格 を 取り 出 
すこ と が で きる わけ で す 。 た と えば 、「 り ん ご 」 を 指定 すれ ば 「500」 を 取り 出す こと が で きる で 
し ょ う 。 


呈 価格 表 


りん ご 500 Var pricelist 
1 志 CONN = ("りん ご ":588, "みかん":388, "も も ":266): 





「 商 品名 : 価格 」 と し ます 
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商品 名 が 選択 され た ら 、 連 想 配列 か ら 該当 する 商品 の 価格 を 調べ 、 選択 され て いる 個数 と か 
け あ わせ て 金額 を 計算 する こと に し ます 。 た と えば 、「 り ん ご 」「1」 が 選択 され た 場合 に は 、 り ん 
ご の 価格 500 円 を 調べ て 、500 x 1 = 500 円 と 計算 する の で す 。 














りん ご 1 個 500x1=500 円 
時 小計 を 計算 する 


この 計算 作業 を プロ グラ ム に し て み ま し ょ う 。 連想 配列 priceList[] を 価格 表 、 変 数 itm を 商 
品名 、 変 数 n を 個数 と する と 、 次 の よう に 考え る こと が で きま す 。 


Var sum = Bi 処理 の 外側 で 準備 し ます 


function add() 
( 商品 名 を 指定 し て 価格 を 取り 出し ます 


varC = pricelist[itml*n: 個数 を か け て 計算 し ます 
SU = SUW+ Ci 
合計 を 計算 し ます 


) 


また 、 選択 追加 する た びに 、 合計 に つい て も 計算 し て お く こ と に し ます 。 計算 し た 合計 金額 は 、 
合計 ボタ ン を 押し た と き に 表示 する よう に し て お きま し ょ う 。 


TipP ら 


合計 を 記憶 する た め の 変 数 sum は 、 処理 の 外側 で 準備 し ます 。 これ は 処理 が 終わ っ て も 、 


現在 の 合計 額 を 保持 し て お く た め で す 。 処理 が 終わ っ て も 変数 に 値 を 記録 し て お きた い 
合 に は 、 処理 の 外側 で 変数 を 準備 し ます 。 





クリ ア 機 能 を つけ て お きま し ょ う 。 「table」 ノー ド の 下 に ある 子 ノ ー ド を 調べ 、 最 後 の 子 ノー 
ド か ら 順 番 に 2 つ 目 の 子 ノ ー ド まで を DOM に よっ て 削除 し ます 。 こ れ で 表題 以外 の 行 が 削除 さ 
れる よう に な り ま す 。 


Var e = document.getElementById("table"): 最後 の 子 ノ ー ド か ら ・・・ 


for(var i=e.childNodes.length-1: i>1: ーー){ 


e.removeChild(e.childNodes[i] ): 
! 削除 し ます 


の = FE - て 


最後 に プロ グラ ム を 完成 させ て み ま し ょ う 。 


Sample4-4-1 .html 置 価格 を 計算 する 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<Iink rel="stylesheet" href="Form.CSS"> 
<title> サ ンプ ル </title> 
<Script type="text/javascript"> 
Var Sum = Bi 
var itemlist = [" り ん ご ", "みか が ん", "も も "]: 
Var pricelist = {" り ん ご ":589, "みかん":388, "も も ":266] 
function add() 
{ 
Var 1tm = myform.items.value: 
Var n = myfOrm.num.value: 


var e = document.getElementById("table"): 
var elmr = document.createElement("tr"): 
Var elmd = document.createElement("td' ): 
var txt = document.createTextNode(jtm): 


elmd.appendChild(txt): 
elmr.appendChild(elmd): 


Var elmd = document.createElement("td'): 
var txt = document.createTextNode(pricelist[itm] ) : 
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elmd.appendChild(txt): 
elmr.appendChild(elmd): 


Var elmd = document.createElement("td' ): 
var txt = document.createTextNode(n): 
elmd.appendChild(txt): 
elmr.appendChild(elmd): 


小計 を 表示 し ます 
varc=pricelist[itml*n: 
SU = SUW+ Ci 合計 額 を 計算 し ます 


var elmd = document.createElement("td'): 
var txt = document.createTextNode (c): 
elmd.appendChild(txt): 
elmr.appendChild(elmd): 


e.appendChild(elmr): 
function cls() 
{ 
Var e = document.getElementById("table"): 
for(var i=e.childNodes.length-1: iz1: ーー){ 
e.removeChild(e.childNodes[i]): 
1 
Sum = Bi 
) 
function calc() 
( 
window.alert(" 合 計 :" + sum+ リ 円 ): 
1 
</Script> 
</head> 
<body> 
<form name="myform' action="Sample4-4-1 .html"> 
<select name ="items"> 
<option value=" り ん ご "> りん ご </option> 
<option value=" みか ん "> みか ん </option> 
<option value=" も も "> も も </option> 
</select> 
<Select name ="num"> 
<option value=1>1</option> 
<option value=2>2</option> 
<option value=3>3</option> 
</select> 
<input type="button" value=" 追 加 " onclick="add( ) "/> 
<input type="button" value=" ク リア" onclick="cls()"/> 
<input type="button" value=" 合 計 " onclick="calc()"/> 
</form> 





<table id="table"> 

<tr> 

<th> 商品 名 </th><th> 価格 </th><th> 個数 </th><th> 計 </th> 
</tr> 

</table> 

</body> 

</html> 


呈 Sample4-4-1 の 表示 
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JavaScript で チェ 


@66 サン ブル ge 
| ⑲ 04/Sample4-4- 1.html [ 



















デー タベース < Column 


ここ で は 、 ご く 簡 単 な 商品 の デー タ を 扱い まし た 。 実際 に 商品 デー タ や 価格 デー タ を 調べ た り 、 ユ 
ー ザ ー か ら の 注文 デー タ を 受け 取る に は 、 も っ と 大 量 の デー タ を 扱う こと に な る で し ょ う 。 

この よう な 大 量 の デー タ を 処理 する 際 に は 、 ファ イル や デー タベース を 使い ます 。 

デー タ を 扱う ファ イル と し て よく 使わ れる 形式 と し て 、 テキ スト ファ イル ・XML ファ イル ・JSON 
ファ イル な ど が あり ます 。 また 、 特に 大 星 の デー タ を 扱う 際 に は 、 VVeb サ ー バ ー 側 で デー タベース 
を 使う こと が 多く な っ て いま す 。 Web サ ー バ ー 側 の デー タベース を 扱う た め に は 、 サー バー 上 で 動 
作 す る プロ グラ ム を 作成 する こと が 必要 で す 。 

JavaScript で は 、 入力 の チェ ッ ク や 計算 を 行っ た り 、 WVeb ペー ジ に 表示 する 処理 を 行う こと が 多 
く な っ て いま す 。 








この 章 の 最後 に 、JavaScript で ユー ザー の 使用 する ブラ ウザ に 適し た サイ ト を 構築 し て 
みる こと に し まし ょ う 。 ユー ザー の 使用 し て いる ブラ ウザ 環境 を チェ ッ ク し て 処理 を する の 
ru が 

会 社 や 自宅 の PC ば か り で な く 、 外 出先 で 利用 する スマ ー ト フォ ン な ど さ ま ざま な 場所 で 
Web サ イト に アク セス する こと が で きま す 。 JavaScript を 使え ば 、 こ うし た 環境 に きめ こ 
ま か に 対応 する Web サ イト を 構築 する こと が で きま す 。 

















還 PC と スマ ー ト フォ ン 


|ABC Company weeco SoftBank 室 。 16:40 929 罰 菩 ! 
0 homepage3.nifty,com と 


経営 理念 


弊社 は お 客 様 の ニー ズ に お 答え し 、 お 客 様 と と も に 歩ん で まい り ます 。 

py 光 
お 取扱 い サ ービス に つい て ご 紹介 いた し ます 。 

会 社 概要 

弊社 は 1980 年 の 設立 以来 、 地域 の 皆様 の 一 員 と し て 営業 を 続け て お り ま す 。 

4gC Copgy 





叙 b こ て omPang 





に 】 
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JavaScript で チェ ッ ク し よう ! 


ププ Web ペー ジ の 内 容 を 検討 する 


まず 、 基 本 と な る Web ペ ー ジ の 内 容 を 検討 し て いく こと に し ます 。 こ こ で は 、 一 例 と し て 、 
次 の 要素 を も つ ペ ー ジ を 作成 し て み ま し ょ う 。 ヘッ ダ ・ ナ ビ ゲ ー シ ョ ン ・ 内 容 ・ フ ッ タ を 構築 す 


る こと に し ます 。 
<header> 
<body> 


<h1>ABC Company</h1> 


<naV> 

<ul> 

<li><a href="#qOa1l "> 経営 理 念 </a> 
<li><a href="#Service"> サ ービス 紹介 </a> 
<li><a href="#COmpany "> 会 社 概要 </a> 
</ul> 

</naV> 

</header> 





<diV 1d="content"> 内 寺 で や 


<div 1d="goal"> 

<h2> 経営 理念 </h2> 

<p> 弊社 は お 客 様 の ニー ズ に お 答え し 、 お 客 様 と と も に 歩ん 々 で まい り ま す 。</D> 
</diV> 


<div id="service"> 

<h2> サ ービス 紹介 </h2> 

<p> お 取扱 い サ ービス に つい て ご 紹介 いた し ます 。</D> 
</div> 


<diV 1d="COmDanV"> 

<h2> 会 社 概 要 </h2> 

<p> 弊社 は 1988 年 の 設立 以来 、 地 域 の 皆様 の 一 員 と し て 営業 を 続け て お り ま す 。</p> 
</diV> 


</diV> 


<footer> 


<addreSS> 
ABC Company 
</addreSS> 
</footer> 


</body> 
</html> 
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天 基本 と な る Web ペ ー ジ の 内 容 





ABC Company 
ia 
・ 三 H 要 
経営 理念 
弊社 は お 客 様 の ニー ズ に お 答え し 、 お 客 様 と と も に 歩ん で まい り ま す 。 
サー ビス 紹介 
お 取扱 い サ ービス に つい て ご 紹介 いた し ます 。 
会 社 概要 


弊社 は 1980 年 の 設立 以来 、 地域 の 皆様 の 一 員 と し て 営業 を 続け て お り ま す 。 
4PC Cozpazy 


この よう な Web ペ ー ジ 





の 内 容 を 設計 し ます 











3 グレ イア ウト を 設計 する 


それ で は 、 検 討 し た 内 容 の ペー ジ を 、PC と スマ ー ト フォ ン の それ ぞ れ の 特性 を 生か し た Web 
ペー ジ の レイ アウ ト で 表示 する よう に 考え て いき まし ょ う 。 

PC で は 大 き な 画 面 を 生か し た レイ アウ ト に 、 ス マー ト フ ォ ン で は 小さ な 画面 を うま く 利 用 す 
る レイ アウ ト を 検討 し て み ま し ょ う 。 こ こ で は 、 次 の よう な レイ アウ ト に する こと を 検討 し て み 
ます 。 





大 PC ( 左 ) と スマ ー ト フォ ン ( 右 ) の レイ アウ ト を 考え る 


スマ ー ト フォ ン で は 
リス ト 形 式 に し ます 





PC で は ナビ ゲー ショ ン 
を 左 に お きま す 


PC の レイ アウ ト で は 、 サ イト の ナビ ゲー ショ ン を 左 に 、 内 容 を 右 に お いて 2 段 組 み と す る こ 
と に し ます 。 ス マー ト フ ォ ン で は リス ト 形 式 に し まし ょ う 。 
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24 ププ 2 種類 の レイ アウ ト を 作成 する 


それ で は 、 こ の レイ アウ ト に 対応 する CSS を 作成 し ます 。 ス マー ト フ ォ ン 用 の ペー ジ と PC 用 
の 2 つの レイ アウ ト を 、 そ れ ぞ れ CSS フ ァイル と し て 実際 に 用 意 し て み ま し ょ う 。 


SamplePC.cSss 革 


body( 
background-color: #988888: 


color: 才 FFFFF: 
font-family: fantasy: 作成 し ます 
background-image: url(title.jpg): 

background-repeat: repeat-x: 


ht{ 
font-size: 2em: 
font-family: fantasy: 


nav{ 
color: 才 FFFF9: 
float: left: 


#Content{ 
float: right: 


footert( 
clear: both: 





SamplePhone.CSS 置 


body( 


background-color: #989898: 

lor: 才 FFFFF: < ド ウォ ン 朋 の 
8 の レイ アウ ト を 作成 し ます 
font-family: fantasyj 


background-image: url(title.jpg): 
background-repeat: repeat-x: 
1 
h1{ 
font-size: 2em: 
font-family: fantasyi: 
) 


nav{ 





端末 に 応じ た サイ ト に し よう 


color: 寺 FFFFB: 


ん グ プ 端末 別 の レイ アウ ト で 表示 する 


それ で は 、 実際 の ペー ジ を 作成 し て み ま し ょ う 。 


Sample4-5-1.html 著 端末 別 の ペー ジ 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<title> サ ンプ ル </title> 

<Script type="text/javascript"> 
Var a = navigator.userAgent: 
var ios = a.jindex0f("1iPhone")>9 || a.index0f("1Pad")>9 || a.indexOf("1Pod" )>9: 
var android = a.indexOf("Android")>9: 


if(ios == true || android == true){ 
document.writeln('<link rel="stylesheet" href="SamplePhone.Css">「): 
} 
elset( 
document.writeln('<link rel="stylesheet' href="SamplePC.css">「): 
1 
</Script> 
</head> 


<header> 

<body> 

<h1>ABC Company</h1> 

< く naV> 

<Ul> 

<lix><a href="#qoal"> 経 営 理念 </a> 
<lix><a href="#Service"> サー ビス 紹介 </a> 
<li><a href="#COmpany "> 会 社 概要 </a> 
</Ul> 

</nav> 

</header> 


<div 1d="content"> 

<div id="goal"> 

<h2> 経営 理念 </h2> 

<p> 弊社 は お 客 様 の ニー ズ に お 答え し 、 お 客 様 と と も に 歩ん で まい り ま す 。</p> 
</diV> 


皿 
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<d1v 1d="serV1iCe"> 

<h2> サー ビス 紹介 </h2> 

<p> お 取扱 い サ ービス に つい て ご 紹介 いた し ます 。</p> 
</div> 


<div 1d="COmDanV"> 

<h2> 会 社 概要 </h2> 

<p> 弊社 は 1988 年 の 設立 以来 、 地 域 の 皆様 の 一 員 と し て 営業 を 続け て お り ま す 。</p> 
</div> 


</divV> 


<footer> 
<addreSS> 
ABC Company 
</addreSS> 
</footer> 


</body> 
</html> 


Sample4-5-1 の 表示 (PC) 


eo@ サン プル と 
\ sample4-5- 1.html C 時 _」1O」 


1 
eo 明 


「) Compang 


経営 理念 

婁 社 は お 客 様 の ズ に お 答え し 、 お 客 様 と と も に 歩ん で まい り ま す 。 
サー ビス 紹介 

お 取扱 い サ ービス に つい て ご 紹介 いた し ます 。 

会 社 概要 


革 社 は jggo 年 の 設立 以来 、 地 域 の 皆様 の 一 員 と し て 営業 を 続け て お り ま す 。 


APC て opang 





端末 に 応じ た サイ ト に し よう 





大 Sample4-5-1 の 表示 (スマ ー ト フォ ン ) 


ゃ eeoo SoftBank 今 16:40 9296 本 隊 : 
homepage3.nifty.com (の 





較 ブラ ウザ の チェ ッ ク を する 

ユー ザー が 使用 し て いる ブラ ウザ を チェ ッ ク す る に は 、 Navigator オ ブ ジ ェクト の userAgent 
プロ パテ ィ を 確認 し ます 。 こ の userAgent プ ロ パ ティ で あら わ さ れ る デー タ に よっ て 、 使 
中 の ブラ ウザ の 種類 を 調べ る こと が で きま す 。 こ こ で は いっ た ん 変数 に 記憶 し 、 変 数 の 値 に 
iPhone、iPad、iPod、Android の 文字 列 が 入っ て いる か どう か を チェ ッ ク し 、 ス タイ ル シ ー ト の 
名 前 を 指定 し て いる の で す 。 























var a = navigator.uSerAgent: 
var ios = a.index0f("iPhone")>9 || a.index0f("Pad")>9 || a.index0Of("iPod" )>8: 
var android = a.index0f("Android" )>9: 


indexOf() は 、 指定 し た 文字 列 の 位置 を 調べ る 機能 で す 。 0 以上 で ある 場合 に は 、 そ の 文 
字 列 が 入っ て いる こと に な り ま す 。 つま り 、 iPhone、 iPad、iPod、 Android の 文字 列 が 入 
っ て いる か を 調べ ます 。 入っ て いれ ば スマ ー ト フォ ン で ある こと に な り ま す 。 
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Navigator オ プ ジ ェ クト は 、 ブ ラウ ザ に 関す る 情報 を 取得 する こと が で きま す 。 コ ー ド 中 で は 、 
「navigator」 の 表記 で オブ ジェ クト を 扱う こと が で きる よう に な っ て いま す 。 


40 に ーー ドッ 


0 


appName ブラ ウザ 名 
appversion プラ ウザ バー ジョ ン 
platform プラ ッ ド ウラ ウォー ム 


userAgent ユー ザー エー ジェ ント (ブラ ウザ ) 


zz ラプ 高 機能 な プロ グラ ム を 作成 する た め に は 
これ まで 、JavaScript の さま ざま な 機能 を 学び 、 活用 し て きま し た 。 JavaScript に は 、 特 に 
便利 な 機能 を まとめ た オブ ジェ クト が まとめ られ 、 公開 され て いま す 。 こ うし て 提供 され る オブ 


ジェ クト の 集まり は 、 ラ イブ ラリ (library) と 呼ば れ て いま す 。 
さら に 高度 な プロ グラ ム を 作成 し て いく た め に は 、 ラ イブ ラリ を 利用 する こと も で きる で し ょ 


う 。 さま ざま な 機能 を 活用 し て 実践 的 な プロ グラ ム を 検討 し て みて くだ さい 。 


還 ライ ブラ リ 


ano 人 20080 

ゃ * 

< <*< 
ロ 


D  。 中 


9 オプ ジェ クト 


< 
COCLLuulg 


で / 
SO っ 


es ライ 0 


オブ ジェ クト 


・ 
* ロロ 
・< きゃ 
Be ここ" 
bk 。 ヘコ 
BOOCLLDCLLLLL 
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< Column 





Web サ イト を 構築 する た め の 一 般 的 な ライ ブラ リ と し て は 、 jQuery が よく 利用 され て いま す 。 よ 
り バ パリ エー ショ ン に 冨 ん だ プロ グラ ム を 作成 し て いく た め に は 、 こ うし た ライ ブラ リ を 活用 する こと 
も 検討 し て みる と よい で し ょ う 。 な お 、 本 書付 録 で は jQuery の か ん た ん な 使い 方 に つい て 紹介 し て 
いま す 。 


時 jQuery の Web ペ ー ジ (http://jquery.com/) 


write /ess, do more. 


Downiosd 。 APIDocumentation Blos Plugins BrowserSupport 


eea 








Resources 





y has changed 


評 
に 





P・] 


ーJm で NSH 1diJoSAB[ 





第 5 草 


ae 





和 


舞 こ 


この 章 か ら 、JavaScript を 使っ た より 実践 的 な ペー ジ を 作成 し て いき ま 


し ょ う 。 JavaScript を 使う と グラ フィ ッ ク 機 能 を 活用 する こと が で きま 


す 。 グ ラフ ィ ッ ク を 描い た り 、 アニ メー ショ ン を し た りす る こと が で きる 
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チャ レン ジ ! キャ ン バ ス に 描画 し て みよ う 

JavaScript を 利用 すれ ば 、Web ペ ー ジ 上 に グラ フィ ッ ク を 描く プロ グラ ム を 作成 する こ 
と が で きま す 。 描画 を する た め の エ リア は キャ ン バ ス (Canvas) と 呼ば れ て いま す 。 こ こ 
で は キャ ン バ ス を 使っ て 描画 する ペー ジ を 作成 し て み ま し ょ う 。 











「 < ニー ニコ) 
| グラ フィ ッ ク 
| を 描画 する こと 
9 が で きま す 








TiP ら 


グラ フィ ッ ク を 措 画 する 機能 は 、 主 に HTML5 の 機能 の 一 部 と し て 提供 され て いま す 。 
JavaScript で は 、 この キャ ン バ ス を DOM に よっ て 操作 し て いま す 。 





き 3 ニョ ー 5 


それ で は 、 キ ャ ン パ バス を 使っ て み ま し ょ う 。 キ ャ ン バ ス は 次 の よう に 使用 し ます 。 


の > に や ドー 
キャ ン バ パス を 指定 する キリ ング ム ア さ の ) アア ニコ キャ ン バ ス に 描画 する 


スト を 取得 する 





キャ ン バ ス を 指定 する 


キャ ン バ ス は HTML5 で 追加 され た 機能 で す 。 キ ャ ン バ ス を JavaScript で 扱う に は 、DOM に 
よっ て キャ ン バ ス 要素 を 指定 し 、 操 作 し ます 。 

次 の よう に キャ ン バ ス を あら わす DOM オ ブ ジ ェクト を 指定 し まし ょ う 。 HTML 文 書 中 の 
「canvas」 要素 に 、 あ ら か じ め ID 名 を つけ て お きま す 。 こ こ で は 、canvas と いう ID 名 を つけ る 
こと に し まし た 。 


キャ ン バ パス を 指定 し ます 
Var C = document.getElementById( "canvas" ) : 
ID 名 を つけ て お きま す 


<CanvaS 1d="CanvaS"></CanV8S> 


コン テキ スト を 取得 する 

キャ ン バ ス を 指定 し た ら 、 描 画 を 行う た め に 必要 に な る コン テキ スト と 呼ば れる オブ ジェ ク 
ト を 取得 し ます 。 平面 図形 を 描画 する コン テキ スト オブ ジェ クト を 得る た め に は 、 キ ャ ン バ ス の 
getContext() メソ ッ ド を 使っ て 、2d と いう 文字 列 を 指定 し て くだ さい 。 


コン テキ スト を 取得 し ます 


Var cnt = c.getContext("2d"): 





胃 キャ ン バ ス に 措 画 する 
コン テキ スト を 取得 し た ら 描 画 を 行い ます 。 描画 する 影 の 太 さ ・ 色 の 設定 、 線 の 色 の 設定 な ど 
を 行っ て か ら 描 画 し ます 。 





た 


ト 


ーwi 点 NAMMIS | 1 








量 描画 に 使う 主 な メン バ 


メン バ | 内 容 


た と えば 、 サ イコ ロ を 描く 場合 に は 、 次 の 指定 を 使う こと が で きる で し ょ う 。 線 の 太 さ ・ ス タ 
イル を 指定 し 、 四 角形 ・ 円 を 描き ます 。 影 の 太 さ と 色 も 指定 で きま す 。 


strokeStyle で 線 の スタ イル を 指定 し ます 
filIStyle で 塗り の スタ イル を 指定 し ます 


shadowBlur で 影 の 太 さ を 指定 し ます 





filIRect で 四角 形 を 描き ます 


arc で 円 ( 弧 ) を 描き ます 


shadowColor で 影 の 色 を 指定 し ます 








実際 に 、 四角 形 と 円 を 組み 合わ せ た 図 形 (サイ コロ の 図 ) を 描画 し て み ま し ょ う 。 この 章 で は 、 
次 の スタ イル シー ト を 使い ます 。 


Canvas.css 刻 キャ ン バ ス 用 の スタ イル シー ト 


body( 
background-color: #B8888: 
} 


Sample5-1-1.html 箸 サイ コロ を 描画 する 


<!DOCTYPE html> 

<html lang=")a"> 

<head> 

<link rel="stylesheet" href="Canvas .CSS"> 
<title> サ ンプ ル </title> 

<script type="text/]javascript"> 


function init() 


( キャ ン パ ス を 指定 し ます 
var Cc = document.getElementById( "canvas" ): 
var cnt = c.getContext("2d" ): コン テキ スト を 取得 し ます 
cnt.shadowBlur = 19: 


影 の 線 と 色 を 指定 し ます 
cnt.shadowColor = "HB88888": 


に 3 


M 


cn 
cn 
Cn 
cnt. 


-StrokeStyle = "#969698': 
-fillStyle = " 才 FFFFF": 


-fillRect(9, 9, 189, 199): 
fil1(): 四角 形 を 描画 し ます 


線 と 色 を 指定 し ます 


に 2 に 3 


に 3 


cnt.filIStyle = "#B8888": 


に 3 


cnt.beginPath(): 
cnt.arc(25, 25, 19, 9, Math.PI*2, false): 円 を 描画 し ます 
cnt.closePath(): 
cnt.fill(): 


に 3 


に 3 


cnt.beginPath(): 
cnt.arc(59, 59, 19, 9, Math.PI*2, false): 円 を 描画 し ます 
cnt.closePath(): 
cnt.fill(): 


に 3 


に 3 


cnt.beginPath(): 
cnt.arc(75, 75, 19, 9, Math.PI*2, false): 円 を 描画 し ます 
cnt.closePath(): 

cnt.fil1(): 


1 


に 3 


</script> 

</head> 

<body onload="1init()"> 

<canvaS 1d="canvas” width="698" height="498"></canvas> 
</body> 

</html> 


5-1 キャ ン バ ス を 使 お う ! 
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画 Sample5- 1 -1 の 表示 


63 05 /Sample5-1-1 html 





大 き な 白 く 塗 られ た 











グラ フィ ッ ク が 措 画 され ます 























を 3 つ 描 いて いま す 。 サイ 




















する こと が で きま し た 。 





層 と し て 描画 





応用 ! キャ ン 


パス を 使い こなす 


それ で は 、 キ ャ ン バ ス を 使い こなし 、 さ ま ざ ま な グラ フィ ッ ク を 描い て み ま し ょ う 。 


時 円 を ラン ダム に 描画 する 











まず 、 た くさ ん の F 





し ます 。 


Sample5-1 -2.html 


<!DOCTYPE html> 
<html lang=" ja"> 
<head> 


<link rel="stylesheet" href="Canvas.CSS"> 
<title> サ ンプ ル </title> 
<Script type='text/javascript"> 


function init() 


( 


var C = document .getElementById("canvas'): 
var cnt = c.getContext("2d" ): 


cnt.shadowBlur = 


cnt.shadowColor 





を ラン ダム な 位置 ・ 色 で 表示 し て み ま し よう 。 

















時 





円 を ラン ダム に 描画 する 


画す る こと に 


for(var 1i=9: 1<388: 1++){ 円 を 300 個 描画 し ます 


(Math.random( ) * 688): 
(Math.random( ) * 498): 

(Meth.random() ・ 255): 
(Math.random( ) * 255): 

(Math.random() * 255): 


Var xX = Darselnt 
y = parseInt 
「 = parselnt 
Var 9 = Darselnt 
b = parseInt 


マ 】 
1 
に 3 


-beginPath( ) : 
cnt.arc(x, y, 5, 
.ClosePath( ) : 
var color = “rgb 


〇 
に 
ー 


〇 
ラ 
に 3 


-filIStyle = 
cnt.fil1(): 


1 

</Script> 

</head> 

<body onload="init( ) "> 
<CanvaS 1d="Canvas' wi 
</body> 

</html> 


目 Sample5-1-2 の 表示 





9, Math.PIx2, false): 


1 0 4 


Color: 


dth="699" height="498"></canvas> 


サン ブル 


)『: 色 を 作成 し ます 


300 個 の 円 が 描画 され ます 
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ここ で は 、 繰 り 返し 文 を 使っ て 300 個 の 円 を 描画 し て いま す 。 描画 位置 と 色 を ラン ダム な 値 
を 使う こと に し ます 。 描画 位置 は 600 x 400 の キャ ン バ ス の 範囲 - お さま る よう に 、 次 の よう 
に し て ラン ダム な 位置 を 得る こと に し ます 。 














x 座 標 を 作成 し ます 
Var X = parseInt(Math.random( ) * 699): 


var y = DarseInt(Math.random() * 498): y 座 標 を 作成 し ます 


| 


色 は 、 次 の よう に し て ラン ダム な 色 と し て いま す 。 


赤 を 作成 し ます 
varr = parseInt(Math.random( ) * 255): 


var 9 = parseInt(Math.random( ) * 255): 緑 を 作成 し ます 
var b = parseInt(Math.random( ) * 255): 


l 


青 を 作成 し ます 


Waf solor = "rf9D("*T ナ "リロ gmD* 9 


色 は rgb() 関数 を 使っ て 、 次 の よう な 書式 で 指定 し ます 。 





ここ で は 各 成 分 を ラン ダム な 値 と し 、 そ れ ぞ れ の 値 を 変数 r、g、b に 記憶 し て いま す 。 シ ン 
グル クォーテーション と ダブ ルク ォ ー テ ーション が 、 正 し く 対 応 し て いる か どう か 注意 し て 入力 
し て くだ さい 。 


rgb( 赤 成分 , 緑 成分 , 青 成分 ) の 各 成分 は 、 0 一 255 の 数 値 で あら わし ます 。 rgb(0.0.0) 
は 黒 、 rgb (255.255.255) は 白 を あら わし ます 。 


還 画像 を 描画 する 


今度 は キャ ン バ ス に 画像 を 描画 し て み ま し ょ う 。 キ ャ ン バ ス の 機能 を 使っ て 、 画像 の 描画 位置 
を 指定 し た り 、 半 透明 に し た りす る こと が で きま す 。 


Sample5-1 -3.html 上 画像 を 描画 する 


<!DOCTYPE html> 
<html lang="ja"> 


に 匠 | キャ ン バ ス を 使 お う ! 


<head> 

<link rel="stylesheet" href="CanVas.CSS"> 
<title> サ ンプ ル </title> 

<script type="text/javascript"> 

Var img = new Image(): 

1mg.SrC = "DiC.jD9': 


function init() 

{ 
var C = document.getElementById("canvas' ): 
var cnt = Cc.getContext("2d"): 


cnt.globalAlpha = 9.2: 透明 度 を 指定 し ます 


for(var i=9: 1<289: 1=+18){ 


cnt.drawImage(img, 1*5, 1*2): 描画 位置 を 変更 し ます 
| 


| 
</Script> 
</head> 
<body onload="init() "> 
<canvaS 1d="Canvas”width="698" height="498"></canVas> 
</body> 
</html> 


時 Sample5- 1 -3 の 表示 


@66@6 サン ブル ほ - 
05/Sample5-1-3.html ) 











描画 位置 と 透明 度 の 異な 
る 画像 が 表示 され ます 


ーV'n 避 計 ささ さ NINMIN | Qi 








画像 の 透明 度 は コン テキ スト オブ ジェ クト の globalAlpha プロ パテ ィ に よっ て 指定 し ます 。 


cnt.globalAlpha = 9.2: 透明 度 を 指定 し ます 


画像 の 透明 度 は 小数 で 指定 し ます 。 な お 、 プ ログ ラミ ング の 世界 で は 、 小数 と 整数 の 区 別 
を つけ る こと が 一 般 的 で す 。 透明 度 0 を 指定 する 場合 に は 、 通常 0.0 と 指定 し ます 。 


画像 は drawlmage() メソ ッ ド で 描画 し ます 。 イ メー ジオ ブ ジ ェクト 、x 座 標 、y 座 標 の 順 で 指 
定 し ます 。 こ こ で は 描画 位置 の x 座 標 を 5、 y 座 標 を 2 ずつ ずら し な が ら 、 繰 り 返し 描画 する よ 
うに し て いま す 。 


が な 描画 位置 を 変更 し な 
for(var i=9: 1<288: 1=i+19){ が ら 繰 り 返し ます 
cnt.drawImage(1mg, 1*5, ix2): 


1 X 座 標 を 指定 し ます y 座標 を 指定 し ます 


り 議 | 


呈 措 画 位置 の 変更 
措 画 位置 変更 し な 
細い が ら 繰り 返し ます 
o 
2 
4 








描画 の た め の メ ン バ 


| キャ ン バ ス を 使 お う 


< Column 


OOOEEEDOEYEYYEPULPUECCCOCCDOCEUUUSUUGCSLDGUULSUCNUUUUULLGCUUELLLULLULLUULL RCCCPCCETEPCLCT DOCCCCCCCCCUUUCUCCOC 


この 節 の プロ グラ ム で は 、 2d コ ン テ キ スト の 描画 の た め の 機 能 を 使い まし た 。 2d コ ン テ キ スト に 
は 、 こ の ほか に も 次 の よう な メン バ が あり ます 。 


司 d コ ン テ キ ス ト の 主 な メン バ 








beginPath() 
closePath() 
moveTo(X, y) 


lineTo(x. y) 
arc(X, y, r, S, @, で ) 


arcTo(x1, y1、x2, y2. r) 

stroke() 

fi 

fillRect(x, y, w, h) 

storkeRect(x, y, w, h) 

clearRect(x, y, w, h) 

strokeText(txt、 x、 y) 

fillText(txt, x, y) 

clip() 

createLinearGradient(x0, y0, x1, y1) 
createRadialGradient(x0, y0, r0. x1, y1.r1) 
drawlmage(img, X, y) 
drawlmage(img. x, y, w, h) 
createPattern(img. repeat) 

scale(x, y) 

strokestyle 

lineWidth 

lineCap 

fillStyle 

shadowBlur 


shadowColor 
shadowOffsetX 
shadowOffsetY 





パス を 開始 する 

パス を 閉じ る 
移動 する 

指定 位置 まで 線 を 引く 


(x. y) を 左上 端 と する 半径 r、 角 度 s…e の 円 弧 を 描く 
(c=true/false : 左 回 り / 右 回 り ) 


(x1.y1) と (x2, y2) を 半径 r の 円 弧 で つなぐ 

線 で 描画 する 

塗り つぶ し で 描画 する 

(x. y) を 左上 端 と する 幅 w 高 さ h の 塗り つぶ し 四角 形 を 描く 
(x, y) を 左上 端 と する 幅 w 高 さ h の 四角 形 を 描く 
(x. y) を 左上 端 と する 幅 w 高 さ h の 四角 形 を 削除 する 
(x. y) か ら 線 テキ スト を 描く 

(x, y) か ら 塗 りつ ぶし テキ スト を 描く 

クリ ッ ピ ング する 

(x0, y0) か ら (x1.y1) に グラ デー ショ ン 

(x0. y0. rO) か ら (x1.y1,r1) に グラ デー ショ ン 
(x, y) か ら 画像 を 描画 する 

(x. y) か ら 幅 w 高 さ h で 画像 を 描画 する 
パタ ー ン を 作る 

変形 する 

線 色 

線 の 幅 

線 の 端 (butt/ round/square) 

塗り つぶ し 色 

影 

影 色 

X 方 向 の 影 幅 

Y 方 向 の 影 高 さ 
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ヒュ コアラ し と コピ レス 3 7 さこ) 
キャ ン バ ス を 使え ば 、 グ ラフ ィ カ ル な アニ メー ショ ン を 作成 する こと が で きま す 。 アニメ 
ーション で は 、 画像 や 図形 を 一 定時 間 ご と に 描画 する こと で 動き を つけ て いま す 。 
こう し た アニ メー ショ ン を 作成 する た め に は 、 キ ャ ン バ ス と タイ マー を 組み 合わ せる と よ 
いで し ょ う 。 この節 で は 、 キ ャ ン バ ス を 使っ た アニ メー ショ ン を 作成 し て み ま し ょ う 。 





ーー (で ヾ ーー ~ 


アニ メー ショ ン を 行う た め に は 、 キ ャ ン バ ス と タイ マー を 組み 合わ せ て 使い ます 。 
た と えば 、0.1 秒 ご と に 処理 を する に は 、draw() と いう 処理 を 次 の よう に 指定 し ます 。 


function init() 


{ 
var t = window.setInterval("draw()", 188): 0.1 秒 刻み に draw() を 処理 し ます 


1 


function draw( ) 


・・ グラ フィ ッ ク を 描画 する よう に し ます 


4 








5-2 | アニ メー ショ ン を 作成 し 


draw() の 中 で 、 図形 ・ 画 像 の 描画 位置 や 透明 度 な ど が 変更 され る よう に し て お く と 、 タ イマ 
ー に よっ て 0.1 秒 ご と に 処理 が 行わ れ ま す の で 、 動 き の あ る アニ メー ショ ン を 実現 する こと が で 
きま す 。 


量 連続 し た 描画 で アニ メー ショ ン を 実現 





mdraw() 中 draw() 墜 draw() 


0.1 秒 ご と に 
描画 が 行わ れ ま す 


ーー に 3 
ーー で 


それ で は 、 実際 に アニ メー ショ ン を し て み ま し ょ う 。 円 を ラン ダム に 描画 する こと に し ます 。 
た くさ ん の 円 を 描く プロ グラ ム は すでに 作成 し まし た 。 今度 は 0.1 秒 ご と に 1 個 ずつ 描画 する ア 
ニメーション と し て み ま す 。 


Sample5-2-1.html 諸 アニ メー ショ ン す る 


<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<link rel="stylesheet" href="Canvas.CSS"> 
<title> サ ンプ ル </title> 
<script type="text/javascript"> 
function init() 
{ 
var {t = window.setInterval("draw()", 188): 
} 
function draw() 
{ 
var C = document.getElementById("canvas" ) 
var cnt = c.getContext("2d"): 


cnt.shadowBlur = 1: 
cnt.shadowColor = "HB88888"': 
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第 5 章 | グラ フィ ッ ク を 描こ う ! 





Var X = parseInt(Math.random( ) * 598): 
Var y = parselnt(Math.random( ) * 496): 
varr = parseInt(Math.random( ) * 255): 


( 
var 9 = parselnt(Math.random() * 255): 
var b = parseInt(Math.random() * 255): 


cnt.beginPath( ) : 

cnt.arc(x, y, 5, 9, Math.PI*2, false): 
cnt.closePath( ) : 

WaF 60HOP' デ REOD(O IF TP PIT SEDe* の 5 


cnt.fillStyle = color: 


cnt.fil1l(): 0.1 秒 ご と に 1 つの 円 を 描画 し ます 
) 


</script> 

</head> 

<body onload="init( ) "> 

<canvas 1d="Canvas” width="699" heiqht="498"></canvas> 
</body> 

</html> 


天 Sample5-2-1 の 表示 




















と の プロ グラ ム で は 、0.1 秒 ご と に 1 つ ず つ 円 を 描画 し て いき ます 。 た くさ ん の 円 を 描画 する 
グラ ム と 、 ほ と ん ど 同 じ 方 法 で 作成 で きる こと が わか る で し ょ う 。 繰り 返し 文 の か わり に 、 
タイ を 使っ て 円 を 描い て いる わけ で す 。 


















































に 】 
に 





5-2 | アニ メー ショ ン を 作成 し よう 


キャ ン バ ス と タイ マー を 使え ば 、 さ ま ざ ま な アニ メー ショ ン を 作成 する こと が で きま す 。 今度 
は 画像 を 使っ た アニ メー ショ ン を し て み ま し ょ う 。 


Sample5-2-2.html 某 画像 で アニ メー ショ ン す る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<Iink rel="stylesheet" href="Canvas .CSS"> 
<title> サ ンプ ル </title> 

<SCript type="text/javasCript"> 

Var img = new Image(): 


var 1 = 1.8: 
function init() 
{ 


1mg.Src="DiC.jDd': 
var t = window.setInterval("draw()", 388): 


} 
function draw() 
{ 
Var C = document.getElementById("canvas' ): 


Var w = C.widthij 
var h = c.height: 
Var cnt = c.getContext("2d"): 


cnt.clearRect(9, 9, w, h): 
1f(1< 9.8) j=1.8: 
必 ら leoNBMs 


cnt.globalAlpha = jj 透明 度 を 変更 し ます 
cnt.drawImage(img, 9, 9): 画像 を 描画 し ます 


</Script> 

</head> 

<body onload="1nit()"> 

<CanvaSs 1d="Canvas” width="699" height="499"></Canvas> 
</body> 

</html> 
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還 Sample5-2-2 の 表示 


休 05/Sample5-2-2.html 






@6G9 サン プル 
eS 円 回 

| 

| 

| 


@e@ 
9 05/Sample5-2-2.htm 


eS 中 回 







サン ブル 


サン プル 





ここ で は 、 タ イマ ー で 時 間 が 経過 する た びに 、 画 像 の 透明 度 を 変更 し て いま す 。 こ の 結果 、 
徐々 に 薄く な る 画像 の アニ メー ショ ン と な っ て いま す 。 





cnt.clearRect(9, 9, w, h): 


if(1< 9.8) i=1.8: 透明 度 が 0.0 よ り 低く な っ た ら 元 に 戻し ます 


4 に 導 | )L 


cnt.globalAlpha = 1: 画像 の 透明 度 を 変更 し ます 














ペイ ント アプ リ を 作成 する 
この 章 の 最後 に 、 Web ペ ー ジ に キャ ン バ ス を 配置 し 、 マ ウス を 動か し て 絵 を 描く Web ア 
プリ を 作成 し て み ま し ょ う 。 こ れ ま で の 知識 を 活用 すれ ば 、 実用 的 な ペイ ント アプ リ も 作成 
する こと が で きる の で す 。 


ペイ ント アプ リ 


@ @o @ サン ブル 
日 還 間 較 良 へ CCO の = で 秩 索 、 ま た は アド レス を 入力 5 LlLLLL.L. 5〔WjJ 。† グ Co 1@) 


思 王 
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グラ フィ ッ ク を 描こ う ! 


補 み ププ ベイ ント アプ リ の 画面 を 設計 する 


まず 、 ア プリ の 画面 を 考え を ましょ う 。 こ の アプ リ は キャ ン バ ス を 黒板 に みた て 、 黒 板 の よ うな 
レイ アウ ト を 設計 する こと に し ます 。 黒板 の 色 ・ 形 は 、 キ ャ ン バ ス 要素 の レイ アウ ト と し て スタ 
イル シー ト で 指定 する こと に し ます 。 


Boarrd.css 置 ペイ ント アプ リ の スタ イル シー ト 


body( 
background-color: #98988: 
Canvas{ 


background-color: #99648: キャ ン バ パス の 背景 色 を 緑 に 設定 し ます 


border-style: outset: 


border-color: 才 FFFFF: キャ ン バ パス の 境界 色 を 白 に 設定 し ます 


補 み グマ ウス で ペイ ント する に は ? 


ペイ ント アプ リ で は 、 ユ ー ザ ー が マウ ス で 操作 し た と き の 処 理 を 設計 する 必要 が あり ます 。 マ 
ウス で 操作 し た と き の 処 理 は 、 次 の よう に すれ ば よい で し ょ う 。 


馬 マウ ス 操作 し た と き の 処 理 
EE 


⑩ マウ ス を 押し た と き 


たと さ 


マウ ス に よる 描画 を 開始 し た こと を 設定 し 、 開 始 位置 を 記す る 





マウ ス を 離し た と き 





マウ ス に よる 描画 が 終了 し た こと を 設定 する 








マウ ス を 押し た と き に 描画 を 開始 し た こと を 設定 し 、 開 始 位置 を 記録 し ます ()。 次 に 、 マ 
ウス を 動か し た と き に 現在 位置 を 調べ 、 開 始 位置 か ら 現在 位置 まで の 描画 を 行い ます ( ぬ )。 そ 
し て 、 マ ウス を 離し た と き に 描画 が 終了 し た こと を 設定 する の で す ()。 





之 み ププ マウ ス の 処理 を 作成 する 


処理 内 容 が 決ま っ た ら 、 マ ウス の 処理 を 記述 し て いき まし ょ う 。 


瑞 キャ ン バ ス 上 の マウ ス の 動き を 受け 取る 

キャ ン バ ス が マウ ス の 動き に 反応 する よう に する た め に は 、 ま ず 次 の よう に 、 キ ャ ン バ ス 上 の 
マウ ス の 動作 を 受け 取る よう に 設定 し て お く こ と が 必要 で す 。 次 の コー ド で は 、 夫 で マウ ス を 押 
し た と き 、@ で マウ ス を 動か し た と き 、 で マウ ス を 離し た と き の 設 定 を 行っ て いま す 。 

この 方 法 は 、 第 3 章 で 紹介 し た 、 ユ ー ザ ー が Web ペ ー ジ を 操作 し た と き の 処 理 方 法 と は 異な 
っ て いる の で 注意 し て くだ さい 。 


function jnit() 
( 


Var C = document.getElementById("canvas'): 。 デ (s) 
C.addEventListener( "mousedown", begin_draw, false): 
Cc.addEventListener("mousemove", draw, false): 


C.addEventListener("mouseup", end_draw, false): 7 


キャ ン バ ス 上 で の マウ ス の 動作 も 、 第 3 章 で 紹介 し た 方 法 と 考え 方 は 同じ で す 。 た だ し 、 
キャ ン バ ス は HTML5 の 要素 で ある た め 、 イベ ント を 受け 取る 方 法 が 第 3 章 の 方 法 と は 少 
し 違っ て いま す 。 キャ ン バ ス 上 の 操作 に 反応 する よう に する た め に は 、 addEventListe 
ner() を 使い ます 。 


昌 マウ ス 操作 の 処理 を 書く 


この あと 、 先 ほど 考え た マウ ス の 操作 時 の 処理 を 記述 する こと に し ます 。 電 て の 処理 を 記 
述 し て いき まし ょ う 。 
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⑩ マウ ス を 押し た と き の 処 理 


function begin_draw(e) 


[描画 中 ] で ある こと を 設定 し ます 
1sDraw = true: 
bx = e.clientX: 描画 位置 を 設定 し ます 


by = e.clientY: 


@②@ マ ウス を 動か し た と き の 処 理 


function draw(e) 


{ 
if(isDraw == true){ [描画 中 で ある 」 と 設定 され て いれ ば 描画 し ます 


1 


マウ ス を 離し た と き の 処理 


function end_draw( ) 
( 

isDraw = false: 描画 が 終了 し た こと を 設定 し ます 
} 


な お 、 true/false は 、2 択 を あら わす JavaScript の 値 で す 。 true は 「 は い 」、 false は 「 い いえ 」 
と いう 意味 に な り ま す 。 

ここ で は 、 true を 「 描 画 中 で ある 」、 false を 「 描 画 中 で な い 」 と いう 意味 で 使っ て いま す 。 そ 
こ で 、 ア プリ の 開始 時 に は 、「false」 を 設定 し て お きま し ょ う 。 描画 位置 の 情報 も 、 最 初 は (0.0) 
と し て お きま す 。 


<sCript type="text/javascript"> 


Var isDraw = false: 最初 は 「 措 画 中 で な い 」 を 設定 し ます 
var bx = 8: 


var by = 6: 描画 位置 を (0.0) と し て お きま す 











実践 ! ペイ ント アプ リ を 作る ろう 


描画 中 か そう で な いか を あら わす 変数 ijsDraw は 、 すべ て の 処理 の 外側 に 書く 必要 が あり 
ます 。 マウ ス の 1 つの 動作 が 終わ っ た と き に も 、 描画 中 で ある か そう で な いか を 記憶 し て 
お く 必 要 が ある た めで す 。 措 画 位置 bx、 by も 同じ 理由 で 、 処理 の 外側 に 書き ます 。 


Event オ ブ ジ ェクト < Column 


Event オ ブ ジ ェクト の clientX、 clientY プロ パテ ィ に よっ て 、 マ ウス の 位置 を 調べ る こと が で きま 
す 。 Event オ ブ ジ ェクト は 、 こ の ほか 次 の よう な プロ パテ ィ を 持っ て いま す 。 必要 に 応じ て 利用 する 
と よい で し ょ う 。 


時 Event オ ブ ジ ェクト の 主 な プロ パテ ィ 


プロ バテ ィ 


type イベ ント の 種類 
clientX ブラ ウザ 上 X 座 標 
clientY ブラ ウザ 上 Y 座 標 
screenX スク リー ン 上 X 座 標 
screenY スク リー ン 上 Y 座 標 
keyCode 押さ れ た キー コー ド 


2z み グ プ ペイ ント アプ リ を 完成 させ よう 


それ で は ペイ ント アプ リ を 完成 させ まし ょ う 。 黒板 の よう な キャ ン バ ス が 表示 され 、 マ ウス を 
クリ ッ ク し て 動か す と 絵 を 描く こと が で きま す 。 


Sample5-3-1 .html 中 ペイ ント アプ リ 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.cSs"> 
<title> サ ンプ ル </title> 

<script type="text/javascript"> 

Var isDraw = false: 
Var bx = 9: 

var by = 8: 


function init() 


{ 
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ge g 2 マウ ス の 動作 を 受け 取 
Var C 9P0SRN2OBEAONIBDOUMIUAGGGIWOS る よう に 設定 し ます 
c.addEventListener("mousedown", begin_draw, false): 


C.addEventListener("mousemove", draw, false): 
C.addEventListener("mouseup", end_draw, false): 
] 


function begin_draw(e) 


( 


bx = e.ClientX: 
1 
function draw(e) 


{ 
0 AA 「 描 画 中 で ある 」 と 設定 さ 
if(isDraw == true)1{ れ て いれ ば 描画 し ます 
Var C = document.getElementById("canvas" ): 
Var cnt = Cc.getContext("2d"): 


Var X = e.ClientXj 
Var y = e.ClientY: 


に 3 


.ShadowBlur = 18: 

.ShadowColor = " 寺 FFFFF": 
linewidth = 5: 

StrokeStyle = 


Cn 
Crn 
Cnt. 
Crt. 


ユー 


"WFFFFFF': 


に 3 


cnt.beginPath(): 
cnt.moveTo(bx, by): 
cnt.lineTo(x, y): 
cnt.closePath( ): 
cnt.stroke( ): 

bx = X% 

by = Vi 


ユ ュ ささ ュー 


] 


function end_draw( ) 


{ 
jsDraw = false: 描画 が 終了 し た こと を 設定 し ます 
1 


</Script> 

</head> 

<body onload="init()"> 

<canvas 1d="canvas” width="689" height="498"></Canvas> 
</body> 

</html> 








5-3 | 実践 ! ペイ ント アプ リ を 作る ろう 





Sample5-3- 1 の 表示 


@@66@ サン ブル 
し 3 | 呈 || 3 05/SampleS-3-1.html 内 | Lo」 
eS 思 典 








ここ で は 、 黒板 アプ リ と し て 、 黒板 に 白 チ ョ ー ク で 描画 する 機能 だ け を 作成 し て み ま し た 。 

この ほか に も 、 さま ざま な 機能 を 追加 する こと が 考え られ る で し ょ う 。 黒板 消し の 機能 、 チョ ー ク 
の 色 を 変更 する 機能 な ど 、 アプ リ に た くさ ん の 機能 を 増やし て いく こと が 考え られ ます 。JavaScript 
と その オブ ジェ クト の 機能 を 学 選 こと で 、 こ うし た 機能 を 実現 し て いく こと が で きる よう に な り ま 
す 。 アプ リ の 機能 を 設計 し 、JavaScript で 自由 自在 に 機能 を 実現 で きる よう に な る と よい で し ょ う 。 
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第 6 草 


マッ プ を 活用 し よう ! 


JavaScript を 使っ て 、 マ ッ プ を 利用 する こと が で きま す 。 マ ッ プ は PC 
や スマ ー ト フォ ン で 幅広 く 利 用 され て いま す 。 マ ッ プ を 利用 する こと で 、 
Web サ イト の 可能 性 が 広がり ます 。 こ の 章 で は マッ プ の 利用 方 法 に つい 


[G ニ さ の だ さら の だ さら) 





邦 ャ レン ジ ! マッ プ を 表示 し よう 
JavaScript に よっ て 、 マ ッ プ (地図 ) を 利用 する Web ペ ー ジ を 作成 する こと が で きま す 。 
マッ プ を Web ペ ー ジ 上 に 表示 し た り 、 マ ウス で クリ ッ ク し た 位置 に 印 を あら わし た りす る 
こと が で きる の で す 。 
また 、 緯 度 ・ 経 度 情報 を 取得 し て 住所 を 表示 し た り 、 住 所 か ら 緯 度 ・ 経 度 情報 を 調べ る 
こと も で きま す 。 
開発 する Web サ イト で マッ プ を 活用 で きれ ば 便利 で す 。 こ の 章 で は 、 マ ッ プ を 利用 し た 





Web ペ ー ジ を 作成 し て み ま し ょ う 。 


時 地図 を 利用 する ペー ジ 


@@69@ サン プル w 


< と 


に 1 
吾 










ハン フル ク の A Cox | 地図 | 秋空 写 中 
ーー ーー T 
ベル リン 。 ベラ ルー シー 
eee 、 ポー ラン ド バー 


) w 
ドイ ツ と 25228 が キモ ラバ リコ マ ッ プ を 利用 する 
vP か | 所 e ーー 
組め SS 生還 si こと が で きま す 
スズ ロ バキ ア 二 | ご 、 oO ペ ドロ ラス 。 
/ 上 ウッ く - 寺 モ ルド バ し ao | 
ュ っ ザ グ レ フ < ハン ガリ ー 3 、 っ オ テ ッ サ 
EC ー 4 OAeca 
oO の ペン Yo トー て コル ニ マ ニア 
9 ノ 。。 リッ っ フク レシ ュ ティ 
Tarino イタ リア ASA っ = 2 い 由 
8 CUE 
me 3 イス タン フル : こん ez 
ンー トル コ 


チュ ニス 0 ロイ スミ 
2 











ご 
記 





本 書 で は 、Google 社 が 提供 する Google Maps JavaScript API バー ジョ ン 3 (V3) を 使用 し 
て マッ プ を 表示 する こと に し ます 。 Google マッ プ に 関す る 情報 は 、 次 の サイ ト か ら 入 手 す る こ 
と が で きま す 。 


Google /Aaps JavaScript API V3 


http://code.qgoogle.com/intl/ja/apis/maps/documentation/javascript/ 


天 Google マ ッ プ の 情報 ペー ジ 






Cocgle Maps API 一 Coogle Developers 


Google Maps API N この ドキ ュ メン 





場所 ペー ス の Apps 


ャ re 
更 覚 化 

ライ セン ス # 5: 

っ Googie Maps API を ご 利用 いた だ いて 3 97026 oe 。 vos 
pwaxy SE ーーー-- |・iE2BRWWN 


ま 


sa ーー ニー au 
デ に 還 の 
3 ステップ で 簡単 に Ta や In 
地図 機能 を サイ ト に 追加 ww いい Ciaco 








Google マッ プ を 利用 する に は 、 Google Maps API キ ー を 取得 する 必要 が あり ます 。 取得 方 法 
に つい て は 、 本 書付 録 で 説明 し て いま す の で 参考 に し て みて くだ さい 。 
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まず 最初 に 、 Web ペ ー ジ 上 に マッ プ を 表示 する 方 法 を 紹介 し て お きま し ょ う 。 マ ッ プ は 次 の 
方 法 で 表示 する こと に し ます 。 


居 「 
アル マッ プ の 準備 を する 
作成 する 


に の 
に アメ リア, ウム アビ レン ルコ マッ プ の 表示 位置 を 
作成 する 取得 する 





還 VVeb ペー ジ を 作成 する 

まず 、 マ ッ プ を 表示 する Web ペー ジ の 内 容 を 考え て お く こ と に し まし ょ う 。 こ の と き 、 マ ッ プ 
を 表示 する た め の 位 置 を 指定 し て お く 必 要 が あり ます 。 

マッ プ を 表示 する 範囲 を 「div」 要素 と し 、ID 名 を つけ る こと に し ます 。 こ こ で は mymap と い 
う 名 前 を つけ る こと に し まし た 。 





<html> 
マッ プ を 表示 する 要素 に ID 名 を つけ て お きま す 


<diV 1d="mymap"></diV> 
</body> 
</html> 


また 、Web ペ ー ジ と 一 緒 に マッ プ の 表示 を 行う CSS を 作成 し ます 。 こ の スタ イル シー ト の 中 
で 、 マ ッ プ の 幅 ・ 高 さ を 指 定 し て くだ さい 。 幅 ・ 高 さ を 指 定 し な いと マッ プ が 表示 され ませ ん 。 
そこ で この 章 で は 、 次 の スタ イル シー ト を 使う こと に し ます 。 





Map.css 諸 マッ プ 用 の スタ イル シー ト 


body{ 
background-color: #B8888: 
1 
h3{ 
background-color: 8889: 
color: 才 FFFFF: 


) 
#mymapt 
MA マッ プ の 幅 ・ 高 さ を 指定 し ます 
height: 498pxi 
1 
表 マッ プ の 準備 を する 


次 に 、 マ ッ プ を 利用 する た め に 、HTML 文書 内 に 「script」 要素 を 記述 し ます 。 

この 「script」 要素 は 、 ほ か の JavaScript の コー ド を 記述 し た 「script」 要素 と は 別に 記述 す 
る 必要 が ある の で 注意 し て くだ さい 。 こ この XXXXX の 部 分 に は 、Google サイ ト で 取得 し た API 
キー を 指定 し て くだ さい 。 


マッ プ を 利用 する た め の 「script] 要素 で す 


<Script type="text/javascript" src="httDp://maps .9009le .COm/maDS/aD1/}S?Key=XXXXX&Sensor= 


ーw で 一 部 NIS | に )」 


false"> 
</script> 
TiP ら 
API キ ー の 取得 方 法 は 、 本 書付 録 で 紹介 し て いま す 。 参考 に し て 取得 ・ 指 定 し て みて くだ 
さい 。 
思 マッ プ の オプ ショ ン を 作成 する 


それ で は 、 新 し い 「script」 要素 に 、 マ ッ プ を 取り 扱う 処理 を 記述 し て いく こと に し まし ょ う 。 

まず 、 マ ッ プ を 作成 する た め に 必須 の オプ ショ ン を 記述 し ます 。 次 の コー ド を みて くだ さい 。 
こと で は 、 マ ッ プ の ズー ムレ ベル (W)、 マ ッ プ 中 央 の 緯度 ・ 経 度 情報 (@)、 マ ッ プ タイ プ (@) 
を 指定 し て いま す 。 

な お 、 緯度 ・ 経 度 情報 を 扱う オブ ジェ クト は 、 new google.maps.LatLng( 緯 度 , 経 度 ) で 作成 
する こと が で きま す 。 








0// 











var Dp = new gOogle.maps.LatLng(9,8): 緯度 経度 情報 を 作成 し て いま す 


var opt = { 


Z00m: 2, ⑩ ズー ムレ ベル で す 
center: D, @ マッ プ の 中 央 で す 


mapTypeld: google.maps .MapTypeld.ROADMAP 
1 ⑥ マッ プ の 種類 で す 


ここ で は 、 北緯 0 度 ・ 東 経 0 度 と いう 緯度 ・ 経 度 情報 を 作成 し 、 マ ッ プ の 中 央 と し て 指定 
し て いま す 。 緯度 経度 を 自由 に 指定 する こと に よっ て 、 表示 され る 位置 を 変更 する こと が 
で きる で し ょ う 。 た と えば 、 北緯 36 度 ・ 東 経 136 度 近辺 の 値 を 指定 する と 日 本 近辺 の 地 
図 が 表示 され ます 。 また 、 ズー ムレ ベル は 、 値 が 大 きく な る ほど ズー ム し て 表示 され ます 。 


因 マッ プ の 表示 位置 を 取得 する 
次 に 、 マ ッ プ を 表示 する 要素 を DOM を 使っ て 指定 し ます (@)。 こ の 要素 に 指定 し た オプ ショ 
ン で 地図 を 作成 する の で す ()。 


@ マッ プ を 表示 する 要素 を 取得 し ます 
Var mm = document.getElementById("mymap' ): 
Var map = new 900dgle.maps .Map(mm, 0Dt) : ⑥⑧ マッ プ を 作成 し ます 


これ ら の 処理 は 、 init() と いう 名 前 の 処理 と し て まとめ 、「body」 要素 の onload に 指定 し て お 
きま し ょ う 。 こ れ で 、HTML 文書 が 読み 込ま れ た と き に 、 マ ッ プ が 作成 ・ 表 示さ れる こと に な り 
ます 。 














それ で は 、 マ ッ プ を 表示 する ペー ジ を 確認 し て みる こと に し ます 。 マ ッ プ が Web ペ ー ジ に 表 
示さ れる こと を 確認 し て みて くだ さい 。 


Sample6-2-1.html 時 マッ プ を 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link re="stylesheet" href="MaD.CSS"> 
<title> サ ンプ ル </title> 


<Script type="text/javasCript" 
false"> 


に 2 


Src="httD://maps .g00gle .COm/maDs/aD1/}S?key=XXXXX&Sens0r= 


</script> マッ プ を 利用 し ます 


<Script type="text/javascript"> 
function init() 
( 
Var D = new q00gle.maps.Lat 
var opt = { 
Z00m: 2, 
center: D, 
mapTyDeld: Oogle .maps .Mal 
]: 


Var mm = dOcument.getElement 
Var map = new 900gle.maps .Map( 

) 

</Script> 

</head> 

<body onload="jnit()"> 

<div 1d="mymap"></diV> 

</body> 

</html> 


画 Sample6-2-1 の 表示 


⑩ ズー ムレ ベル で す 


Lng(9,8): 


の マッ プ の 中 央 で す 
pTypeld.ROADMAP 
⑥ マッ プ の 種類 で す 


0 〇 マッ プ を 表示 する 要素 を 取得 し ます 


POm. pt: し 0 マッ プ を 表示 す る 家人 し ます | 
@⑧ マッ プ を 作成 し ます 


サン ブル 


| |』 | 加 | ⑨ 06/sample6-2-1.ntml と | 1@」 


eS 中 時 


チリ 


アル セン チン 





イギリス 
ポー ラン ド 
ドイ ツ =。 ウ クラ イナ 
フラ ンス 
スペ イン ポリ 
トル コ 
イラ クィック フカ ニス タン 
アル ジェ リア リピ ァ エ ジフ トド バキ スタ ン 
ザウ シア ラビ ピア インド 
マリ ニジェール スー タン 
チャ ド 
ナイ ジェ リア エ テ チオ ォ ピ ァ 
ケニア 
タン ザ ニ ァ 
アン コラ 


ナミ ビア 


ポッ ワナ マタ ガス カル 


南ア フリ カ 


に ジア ん モコ (1 た で 】 








-uw で 琶 Ns | 








第 6 章 | マッ プ を 活用 し よう ! 


マッ プ の 種類 < Column 


マッ プ タ イ プ は マッ プ の 種類 を あら わし ます 。 マッ プ タ イ プ に は 、 次 の 種類 (通常 ・ 航 空 写真 ・ ハ 
イブ リッ ド ・ 地 形 ) が あり ます 。 さま ざま な 表示 を 確認 し て みて くだ さい 。 





呈 さ ま ざ ま な マッ プ タ イ プ 





| 


@ 9 サン プル eoeg サン プル 






| | っ 
| 
| 1 寺 | 
| 2 別 | 


ee 
| コテ ァ 


ROADMAP (通常 ) 





| wee サン プル eo サン プル 


IIE 
に EE 8 < | 




















| HYBRYD (ハイ プリ ッ ド : 航空 写真 と 重ね る ) | TERRAIN 








今度 は マッ プ を クリ ッ ク し た と き に 、 マ ー カ ー を 表示 する よう に し まし ょ う 。 マー カー と 
は 、 マ ッ プ 上 に 表示 で きる 印 の こと で す 。 ク リッ ク し た 位置 に マー カー を 表示 する よう に す 
る の で す 。 


サン ブル 















ポー ラン ド 
ドイ ツ フラ ハ クラクフ 
、Pn か ゃ La 





3 ォ ェ フツ コ フ 
人 


員 ウ クラ イ 示 尺 28 
いこ レン 






ミコ ジジ 
ー ス ロバ キア 





フス ク 










0 
『 


し 9 
ロー マ M 
Roma 





年 







チュ ニス 
っ で を 


2 
と 


2 トリ ポリ 
こ Co 









ーV で 衣 部 NIS | <)」 








ー カ ー いい ご EE 2 


央 , 

に ルウ ん ンス リ ドル ン 4 の 7 レル ドレン 4 の さっ に 
と き に 処理 され る よう マー カー を 表示 する 
a ヨ [:E ま っ ) 





還 フリ ッ ク を 受け 取る 準備 を する 
まず 、 マ ッ プ 上 で クリ ッ ク 操 作 し た 場合 に 動作 する よう に する た め に は 、 次 の 方 法 で 処理 を 
登録 する 必要 が あり ます 。 





、 9009le.maps.event addListener( マッ プ を 表す 変数 名 ," イ ベント", 処理 名 ): 


た と えば 、 変 数 map で 扱っ て いる マッ プ を クリ ッ ク し た と き に 処理 を 行う に は 、 次 の よう に 
指定 し ます 。 


900gle.maps.event.addListener(map, “Click", map_click): 


行わ れる 処理 を 指定 し ます 


function map_click(e) 


( 









マッ プ を クリ ッ ク し た と き に 、 
) ここ に まとめ た 処理 が 行わ れ ま す 


ここ で は 、map_click と いう 名 前 の 処理 を 作成 し て お き 、click イ ベン ト が 起こ っ た 場合 に 処 
理 が 行わ れる よう に する の で す 。 


マー カー を 作成 する 

次 に 、 マ ー カ ー に 関す る オプ ショ ン を 作成 し て お きま す 。 こ こ で は 、 マ ー カ ー を 表示 する 位置 
(⑩)、 マ ー カ ー を 表示 する マッ プ を あら わす 変数 (@)、 マ ー カ ー の タイ トル () を 指定 し て い 
ます 。 こ れ ら の オプ ショ ン を 指定 し て 、 マ ー カ ー を 作成 し ます (⑨)。 





に 





2 フリック し た 緯度 ・ 経 度 を 調べ ます 
bu ⑩ マーカ ー を 表示 する 位置 と ・・・ 
DOSition: D, 
maD: maD, ② マー カー を 表示 する マッ プ と ・・・ 
title: "目的 地 " 
: @⑥ マーカ ー の タイ トル を 指定 し ・・・ 


Var mK = new google.maps.Marker(mD): の マー カー を 作成 し ます 


| 


それ で は 、 マ ー カ ー を 表示 する ペー ジ を 完成 させ て み ま し ょ う 。 


Sample6-3-1 時 マー カー を 表示 する 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Map.CSS"> 

<title> サ ンプ ル </title> 

<script type="text/javascript" src="httDp://maps .g0ogle .COm/maps/aD1/jS?Key=XXXXX&sensor= 
false"> 

</Sscript> 

<SCript type="text/javascript"> 

Var maDi 


function init() 
{ 
var Dp = new google.maps.LatLng(9,8): 
var opt ={ 
Z00m: 3, 
center: D, 
mapTypeld: google.maps .MapTypeld.ROADMAP 
}j 
var mm = document.getElementById( "mymap' ): 
map = new 900gle.maps.Map(mm, 0Dt): 


PC] es マッ プ を クリ ッ ク し た と き に 
9g00gle.maps .event.addListener(map, Click", map_click): 行わ れる 処理 を 指定 し ます 


function map_click(e) 


( 
Var D = e.latLndgj クリ ッ ク し た 位置 を " 


var 叩 ={ 
position: D, 


ーVi で 画 剖 RTNLS く る | の 





に 
の 








maD: maD, 


title: "目的 地 " 
}: 
Var mk = new google.maps.Marker(mDp): 
} 
</Script> 
</head> 


<body onload="init()"> 
<div id="mymap"></div> 
</body> 
</html> 


居 Sample6-3-1 の 表示 





eee@ サン プル 了 : 





マッ プ 上 の クリ ッ ク し た 位置 に マー カー を 表示 する こと が で きま す 。 JavaScript の プロ グラ 
ム に よっ て 、 マ ッ プ 上 に マー カー を 表示 する こと が で きま し た 。 


マー カー は 地図 上 の 1 点 を あら わす た め に 使わ れる 記号 で す 。 この ほか に も 、 ポリ ライ ン 
(地図 上 の 線 ) ・ ポ リ ゴ ン (地図 上 の 領域 ) ・ 情 報 ウ イン ドウ な どの 記号 を 利用 する こと が 
で きま す 。 これ ら の 記号 は 「 オ ー バ ー レ イ 」 と 呼ば れ て お り 、 プロ グラ ム 上 で カス タマ イ 
ズ す る こと も で きま す 。 くわ し く は Google 社 の 情報 を 参照 し こく だ さい 。 





マー カー を 表示 し て みよ う 





マッ プ を 表示 する 際 に は 、 VVeb サ ー バ ー と の 通信 が 行わ れ て いま す 。 JavaScript で は 、 WVeb サ 
ー バ ー と 通信 する た め に 、Ajax (Asynchronous 〔 非 同期 〕】 JavaScript XML) と 呼ば れる 通信 の 仕 
組み を 使い ます 。 Ajax は 、 JavaScript の 処理 中 に Web サー バー と の 通信 を 行う 仕組 み で す 。 

Web サ ー バ ー に 対し て デー タ を 要求 する こと を 、 リフ クエスト (request) と いい ます 。 サー バー か 
ら の 応答 を 、 レ スポ ンス (response) と いい ます 。 Ajax は 、 こ の リク エス ト ・ レ スポ ンス に よる 通 
信 を 、 JavaScript の コー ド の 通常 の 処理 と は 別に (非同期 に : Asynchronous) 行う こと が で きる 
と いう こと を 意味 し て いま す 。 


量 非同期 に 通信 を 行う Ajax 





ーー リク エス ト 
必 

wz Ne ン 
人 王 還 、 ae 
レス ボン ス 


Web ク ライ アン ト Web サ ー バ ー 


JavaScript の プロ グラ ム 中 で は 、 XMLHttpRequest オ ブ ジ ェクト の 機能 を 使っ て 、 直接 Web サ 
ー バ パー と 通信 する こと も で きま す 。 Web サーバー と 連携 する こと で 、 高度 な WWeb サ イト を 構築 し 
て いく こと が で きる の で す 。 


ーwV で 衣 問 対人 | O) 









目 6_4 樽 度 ・ 経 度 情報 を 使 お う 





邦 ャ レン ジ !| 住所 情報 を 表示 する 

次 に 、 マウ ス で クリ ッ ク し た 位置 情報 か ら 住所 情報 を 検索 し 、 表示 する ペー ジ を 作成 し 
て み ま し ょ う 。 た と えば 、 マ ッ プ 上 の 「 富 士 山 」 を クリ ッ ク し た 場合 に 、 富 士 山 近辺 の 住所 
が 表示 され る と いっ た 具合 で す 。 マッ プ を 利用 する こと で 、 住 所 情報 を 調べ る こと が で き 
る よう に な っ て いる の で す 。 


馬 マッ プ の 位置 情報 を 使い こなす 


eo@ サン プル 


住所 情報 を 知る 
こと が で きま す 


と ) 


日 本 , 静岡 県 富士 宮 市 北山 富士 山 ス カイ ライ ン 











住所 情報 を 表示 する に は 、 ク リッ ク し た 位置 の 緯度 ・ 経 度 情報 か ら 住所 を 検索 し た うえ で 、 
検索 結果 を 処理 する 必要 が あり ます 。 順 を 追っ て みて み ま し ょ う 。 





7. と 
緯度 ・ 経 度 情報 か ら に S52 検索 結果 を 処理 する 
検索 を 行う 





上 緯度 ・ 経 度 情報 か ら 検索 する 


まず 、 住 所 の 検索 を 行い ます 。 こ の た め に は 、Geocoder オ ブ ジ ェクト を 作成 し ます ()。 こ 
の geocode() メソ ッ ド に 、 緯度 ・ 経 度 情報 を 渡し て 検索 を 行う の で す 。 

クリ ッ ク し た 位置 を 調べ (⑧)、 緯 度 ・ 経 度 情報 を 作成 し ます (@)。 

そし て 、 こ の 情報 を geocode() メ ソ ッ ド に 指定 し て 検索 を 行い ます (⑳)。 こ の と き 、 検 索 結 
果 を 受け 取る 処理 も 指定 し て お きま す (G)。 


function map_click(e) 


( 


Var ge0 = new 009le.maDS.Ge0coder( ) : ⑨ Geocoder オ プ ジ ェ クト を 作成 し ます 


の ひ ク リック し た 位置 の 紳 度 ・ 経 度 情報 を 調べ ます 
CD = e.latLngi 


var ltlg = {latLng: cp]j 緯度 ・ 経 度 情報 を 作成 し ます 
ge0.9e0C0de(ltlg, getResult) 
) @ 処 理 を 指定 し て お きま す 
〇 緯度 ・ 経 度 か ら 検 索 を 行い ます 


中 検索 結果 を 表示 する 

結果 を 受け 取る getResult() 処理 の 中 で は 、2 つ の 変数 を 指定 し て お きま す ()。 1 つ 目 の 変 
数 は 位置 情報 を 、2 つ 目 の 変 数 は 検索 の 状態 を 受け 取る た め の も の で す 。 

そこ で 、2 つ 目 の 変 数 status で 、 検 索 の 状態 を 調べ て 検索 が 成功 し て いれ ば (@)、1 つ 目 の 
変数 res か ら 位 置 情報 を 取得 し ます 。 


こと き に 処理 さ 
function getHesult(res, status) aaa 


( の 検索 が 成功 し た 場合 に …・ 
if(status == google.maps.GeocoderStatus.0OK){ 


if(res[9] != null){ 位置 情報 が 存在 すれ ば ・…・ 


map .setCenter(cp): 
〇 マッ プ の 中 央 に し て 移動 し ます 


| 


ーw で 男 問 NIS | OO 











varmp=[{ 


maD: maD, 
position: cp 
j マー カー を 作成 し ます 
Var mK = new google.maps .Marker(mD): 
var ad = document.getElementById("address" ): 
ad.innerHTML = res[9].formatted_address: 
| 
1 


elset 
window.alert(" 利用 で きま せん で し た 。"”) : 検索 が 失敗 し た 場合 の 処理 で す 


1 


位置 情報 が 存在 すれ ば (⑯)、 こ の 位置 に マッ プ の 中 央 を 移動 し て (⑳)、 マ ー カ ー を 作成 し ま 


す ()。 
最後 に 、 Web ペ ー ジ 中 の 指定 位置 に 住所 情報 を 表示 し て いま す ()。 











RI 己 - 宮 


それ で は 、 住 所 情報 を 検索 する マッ プ を 完成 させ まし ょ う 。 ク リッ ク し た 位置 の 住所 情報 を 
表示 し ます 。 








Sample6-5-1.html 入 マッ プ を 完成 させ る 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Map.CSs"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript" src="http://maps .900gle .Com/maps/ap1/}S?key=XXXXX&sensor= 
false"> 

</script> 

<Script type="text/javascript"> 

Var Wai 

Var CDj 


function init() 
( 
Var D = new google.maps.LatLng(36,148): 
var opt = { 
Z00m: 8, 
center: D, 
mapTypeld: Oogle.maps .MapTypeld.ROADMAP 
}: 
Var mm = doOcument.getElementById("mymap" ) : 
map = new dO0gle.maps .Map(mm, opt): 


g00gle .maps .event.addListener(map, click", map_click): 
1 


function map_click(e) 


( 


Var ge0 = new gOogle.maps.Ge0coder(): Geocoder オ ブ ジ ェクト を 作成 し ます 








ーW で 骨 部 時 < 人 る | 











フク リック し た 位置 の 緯度 ・ 経 度 情報 を 調べ ます 


和 簡 度 ・ 経 度 情報 を 作成 し ます 
var ltlg = (latLng: cp}: 
9e0.9e0code(ltlg, getResult) 緯度 ・ 経 度 か ら 検索 を 行い ます 


} 
function getResult(res, status) 
( 
if(status == google.maps.GeocoderStatus .OK){ 
if(res[9] != null){ 


検索 結果 を 受け 取っ た と き に 処理 され ます 


検索 が 成功 し た 場合 に ・・・ 


位置 情報 が 存在 すれ ば ・・・ 


か 軒 情 報 が 存在 す れ ば ーー・ | 
vermp=( マッ プ の 中 央 に し て 移動 し ます 
maD: maD, 


position: cp 
5 
Var mk = new qoogle.maps.Marker(mD): 
var ad = document.getElementById("address' ): 
ad.innerHTML = res[9] .formatted_addressi 
1 
1 
elset 
window.alert(" 利 用 で きま せん で し た 。") : 


</script> 

</head> 

<body onload="init()"> 
<diV 1d="mymap"></div> 
<form name="myform"> 
<h3 id="address"></h3> 
</form> 

</body> 

</html> 


マー カー を 作成 し ます 
住所 情報 を 表示 し ます 


6-5 | マッ プ を 完成 させ る 





時 Sample6-5-1 の 表示 


@69669 
中 | 呂 | ⑨ 06/Sample6-5-1.html 
eS 還 財 


日 本 , 首都 高速 漠 岸 線 





サン プル 3 


タ e2013 Google. ZENRIN - 誠 用 規 


マッ プ 上 の 東京 湾 近 辺 を クリ ッ ク し て み ま し た 。 住所 情報 が 表示 され て いま す 。 


さて 、 い か が で し た で し ょ うか ? JavaScript を 使っ て 、 バ リエ ーション に 富ん だ Web サ イト ・ 
Web ア プリ を 作成 する こと が で きた で し ょ うか ? 





JavaScript を 使え ば 、 さ ら に 高度 な プ 




















グラ ム も 作成 し て いく こと が で きる で し ょ う 。 Java 


Script を 使っ て 自由 な Web サ イト を 構築 し て いっ て みて くだ さい ! 




















ーJVi で 田部 NAS | (に)」 











付録 


(@】UI【e 才 IS1gclate( 

リル の の ペ 

jQuery 

(efee:【=/El に き パ ョ ピコ 








Quick_Reference 


司 Date オ ブ ジ ェクト (日 付 に 関す る 機能 ) 


getFullYear() 年 を 取得 する 
getMonth() 月 を 取得 する 
getDate() 日 を 取得 する 
getDay() 曜日 を 取得 する 
getHours() 時 を 取得 する 
getMinutes() 分 を 取得 する 
getSeconds() 秒 を 取得 する 
getMilliseconds() ミリ 秒 を 取得 する 
setFullYear(year) 年 を 設定 する 
setMonth(month) 月 を 設定 する 
setDate(date) 日 を 設定 する 
setDay(day) 曜日 を 設定 する 
setHours(hour) 時 を 設定 する 
setMinutes(min) 分 を 設定 する 
setSeconds(sec) 秒 を 設定 する 
setMilliseconds(msec) ミリ 秒 を 設定 する 
toDateString() 日 付 文字 列 を 取得 する 
toTimeString() 時 刻 文字 列 を 取得 する 
toLocaleDateString() ロー カル 日 付 文字 列 を 取得 する 
toLocaleTimeString() ロー カル 時 刻 文字 列 を 取得 する 
toString() 文字 列 を 取得 する 


還 String オ ブ ジ ェクト (文字 列 に 関す る 機能 ) 


indexOf(str) 前 方 か ら str を 検索 する 
lastindexOf(str) 後方 か ら str を 検索 する 
substring(s.@) s 文 字 目 -e 文 字 目 を 取得 する 
substr(s. n) s 文 字 目 か ら n 文 字 取得 する 
split(str) str で 分 割 し た 文字 列 配列 を 取得 する 
toUpperCase() 大 文字 に 変換 する 

toLowerCase() 小文字 に 変換 する 

charAt(n) n 文 字 目 を 取得 する 

link(str) リン ク を 作成 する 

match(pt) パタ ー ン を 検索 

replace(ptstr) パタ ー ン を 検索 し て str で 置換 
search(pt) パタ ー ン を 検索 し て 最初 の 文字 を 取得 
concat(str) str を 追加 する 


length 文字 列 の 長 さ 





屋 Math オ ブ ジ ェクト (数 値 に 関す る 機能 ) 


ceil(num) 
floor(num) 
round(num) 
abs(num) 
max(num1., num2) 
min(num1, num2) 
Pow(num, P) 
sqrt(num) 
Sin(num) 
cos(num) 
tan(num) 
random() 

PI 


切り 上 げ て 整数 を 取得 
切り 捨て て 整数 を 取得 
四捨五入 で 整数 を 取得 
絶対 値 を 取得 
最大 を 取得 
最小 を 取得 

p 乗 を 取得 
平方 根 を 取得 
サイ ン を 取得 
コサイン を 取得 

タン ジェ ント を 取得 
0 以上 1 未満 の 乱数 を 取得 
女 


居 Window オ ブ ジ ェクト (ウィ ンド ウ に 関す る 機能 ) 


open(url, name, opt) 


close() 

focus() 
alert(str) 
confirm(str) 
moveBy(X, y) 
moveTo(X, y) 
resizeBy(X, y) 
resizeTo(X, y) 
scrolIBy(x, y) 
scrollTo(x, y) 
Print() 
setlInterval(func, num) 
setTimeOut(func. num) 
clearlnterval() 
clearTimeOut() 
width 

height 

location 
scrollbars 
resizable 
toolbar 

status 


menubar 


URL・ ウ ィ ン ド ウ 名 ・ オ プシ ョ ン を 指定 し て ウィ ンド 
ウ を オー プン する 


ウィ ンド ウ を クロ ー ズ する 

ウィ ンド ウ を 前 面 に する 

メッ セー ジ を 指定 し て 警告 ダイ アロ グ 表 示す る 
メッ セー ジ を 指定 し て 確認 ダイ アロ グ 表 示す る 
相対 位置 へ 移動 

絶対 位置 へ 移動 

相対 サイ ズ 変更 

絶対 サイ ズ 変更 

相対 位置 へ スク ロー ル 

絶対 位置 へ スク ロー ル 

印刷 

指定 し た 間隔 で タイ マー の 処理 を 行う 
指定 し た ミリ 秒 後に タイ マー の 処理 を 行う 
setlInterval() の 指定 を 解除 する 
setTimeOut() の 指定 を 解除 する 

幅 

高 さ 

アド レス バー 表示 / 非 表示 

スク ロー ル バ ー 表 示 / 非 表示 

サイ ズ 変 更 可能 / 不 可能 

ツー ル バ ー 表 示 / 非 表示 

ステ ー タ スバ ー 表 示 / 非 表示 

メニ ュー バー 表示 / 非 表示 





App 











恒 Navigator オ ブ ジ ェクト (ブラ ウザ に 関す る 機能 ) 紀 


appName ブラ ウザ 名 
appversion プラ ウザ バー ジョ ン 
platform プラ ッ ト フ ォ ー ム 
userAgent ユー ザー エー ジェ ント 


尾 Location オ ブ ジ ェクト (ロケ ーション に 関す る 機能 ) 


reload() 再読 み 込 み 

replace(url) 指定 ペー ジ に 移動 

href 現在 の URL を 取得 プリ ンク 先 を 設定 
hash ペー ジ 中 の リン ク を 取得 プリ ンク 先 を 設定 
host ホス ト に 関す る 情報 

hostname ホス ト 名 

pathname パス 名 

port ポー ト 番 号 

protocol プロ トコ ル 

search クエ リ 


大 Document オ ブ ジ ェクト (HTML 文 書 に 関す る 機能 ) 


clear() 文書 内 容 を クリ ア す る 
open() 文書 出力 を 開始 する 
close() 文書 出力 を 終了 する 
write() 文書 に 出力 する 
writeln() 文書 に 出力 ・ 改 行 する 
getSelection() 選択 文字 列 を 取得 する 
cookie クッ キー の 値 
domain 文書 の ドメイン 
lastModified 文書 の 最終 更新 日 
referrer リン ク 元 URL 
title タイ トル 
location 文書 の URL 
URL 文書 の URL 

時 DOM 


還 
getElementByID() id を 指定 し て 要素 を 取得 する 
getElementsByTagName() タグ 名 を 指定 し て 要素 リス ト 取得 する 


createElement(name) 要素 名 を 指定 し て 要素 を 作成 する 





createAttribute(name) 


createTextNode(text) 
createComment(text) 









appendChild(elem) 
removeChild(elem) 


replaceChild(elem1., elem2) 


innerHTML 
nodeType 
nodeName 
nodeValue 
childNodes 
firstChild 
lastChild 
previousSibling 
nextSibling 





createAttribute(name) 
removeAttribute(name) 
getAttribute(name) 


setAttribute(name、 value) 


attributes 





属性 名 を 指定 し て 属性 を 作成 する 
テキ スト を 指定 し て テキ スト ノー ド を 作成 する 
テキ スト を 指定 し て コメ ント を 作成 する 








指定 し た ノー ド を 子 ノ ー ド と し て 追加 する 
指定 し た 子 ノ ー ド を 削除 する 
指定 し た 子 ノー ド 1 を 子 ノ ー ド 2 で 置き 換え る 
ノー ド 内 の HTML 部 分 

ノー ド 種 類 : 1 = 要素 2 属性 3= ニ テキスト な ど 
ノー ド 名 

ノー ド 値 

子 ノ フー ド の リス ト 

最初 の 子 ノー ド 

最後 の 子 ノー ド 

前 の 兄弟 ノー ド 

次 の 兄弟 ノー ド 







指定 し た 属性 名 の 属性 を 作成 する 
指定 し た 属性 を 削除 する 

指定 し た 属性 名 の 属性 値 を 取得 する 
属性 名 と 属性 値 を 設定 する 

属性 の リス ト 


届 2d コ ン テ キ スト (キャ ン バ ス に 関す る 機能 ) 


beginPath() 
closePath() 
moveTo(x, y) 
lineTo(x. y) 


arc(X, y, r, S, @, C) 


arcTo(x1,y1. x2.y2.r) 
stroke() 

fil) 

fiIRect(x, y, w, h) 
storkeRect(x, y, W, h) 
clearRect(X, y, w, h) 
strokeText(txt, x. y) 
fillText(txt, x, y) 

clip() 


createLinearGradient(x0., y0. x1, y1) 


パス を 開始 する 
バス を 閉じ る 
移動 する 

指定 位置 まで 線 を 引く 


(x, y) を 左上 端 と する 半径 r、 角度 s…e の 円 弧 を 描く 
(c=true/false : 左 回 り / 右 回 り ) 


(x1.y1) と (x2. y2) を 半径 r の 円 弧 で つなぐ 

線 で 描画 する 

塗り つぶ し で 描画 する 

(x, y) を 左上 端 と する 幅 w 高 さ h の 塗り つぶ し 四角 形 を 描く 
(x, y) を 左上 端 と する 幅 w 高 さ h の 四角 形 を 描く 

(x, y) を 左上 端 と する 幅 w 高 さ h の 四角 形 を 削除 する 

(x、 y) か ら 線 テキ スト を 描く 

(x, y) か ら 準 りつ ぶし テキ スト を 描く 

クリ ッ ピ ング する 

(x0. y0) か ら (x1.y1) に グラ デー ショ ン 


createRadialGradient(x0. y0, r0. x1,y1.r1)  (x0,.y0.r0) か ら (x1,y1,r1) に グラ デー ショ ン 


drawlmage(img, x, y) 


(x, y) か ら 画像 を 描画 する 





App 
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メン | 


デ 


是 HTML 


w HTML 4.01 
http://www.w3.org/TR/1999/REC-html401-19991224/ 
* HTML5 
http://www.w3.org/TR/html5/ 


圏 CSS 


es CSS 
http://www.w3.org/Style/CSS/ 


明 JavaScript 


* Mozilla Developers Network 
https://developer.mozilla.org/ja/docs/Web/JavaScript 


表 Google マッ プ 
w Google Maps JavaScript API V3 
http://code.google.com/intl/ja/apis/maps/documentation/javascript/ 


還 JavaScript ラ イブ ラリ 
W jQuery 
http://jquery.com/ 








JavaScript の ライ ブラ リ と し て jQuery が 広く 利用 され て いま す 。jQuery も JavaScript と 同 
様 に HTML フ ァイル 内 に プロ グラ ム を 書く こと で 利用 する こと が で きま す 。 こ こ で は 、 か ん た ん 
に jQuery の 使い 方 を 紹介 し て お きま し ょ う 。 


1。 ライ プラ リ を ダウ ジ シロー ド す る 
jQuery の サイ ト か ら ラ イブ ラリ ファ イル を ダウ ン ロ ー ド し ます 。 
加計 http://jquery.com/ 


eee Javey 


FIT KO < 記 辻 21o 





/Que 


wrte /efs コル 4 rm 


Downlead APlDocumentation Bloe 


ダウ ン ロ ー ド し ます 


Resources 
What is jQuery? 
IOuary Cors AFI 
/Query sa fast. smaland festure-rch JavaScrpt Hbray. tmakes things ike Documenlatr 


HTMAL doner Yaverlwnd menuedon evert lending antmeion and Ak 
ch aimpler wth an easy-to-use AP het works across a muNttude 
browsers_ With a combination of versatiily and extenaiDiity IOwwy he hanoed ousy Bloo 


ay Learnng Center 








2. ライ ブラ リ を 配置 する 
ダウ ン ロ ー ド し た ライ ブラ リフ ァイル (本 書 で は jquery-1.10.2.minjs」 ) を 、 jQuery を 使 
用 する HTML フ ァイル と 同じ フォ ル ダ 内 に 保存 し て くだ さい 。 





A 
3. HTML フ ァイル を 作成 ・ 表 示す る L_ 


jQuery を 利用 する た め の HTML フ ァイル を 作成 し ます 。 こ の た め に は 「script」 要素 に 次 の 
指定 が 必要 に な り ま す 。 こ の 指定 は 、 ほ か の 「script」 要素 と は 別 の 要素 と し て 指定 する 必 
要 が あり ます 。 な お 、 こ こ で は ライ ブラ リ の ファ イル 名 と し て 「jquery-1.10.2.minjs」 を 指 
定 し て いま す 。 


ダウ ン ロ ー ド し た ファ 
イル 名 を 指定 し ます 


<Script type="text/javascript" src="jquery-1.19.2.min.jS"></script> 








Appendix.html 下 jQuery を 使用 し た プロ グラ ム 


<!DOCTYPE html> 

<html lang="ja"> 

<head> 

<link rel="stylesheet" href="Sample.CSS"> 
<title> サ ンプ ル </title> 

<Script type="text/javascript" src=" jquery-1.19.2.min.jS"></sScript> 

<Script type="text/javascript"> 


function welcome() 
“ 


$("#image") .fadeTo(388, 9.5): 


) 6 フェ ー ド 処理 し ます 
</SCript> 


</head> 
<body> 
<jimg src="Sample.jpg′1d="1mage" onclick= "welcome()"/> 
</bodV> 
</html> 


還 Appendix.html の 表示 


@ee@ サン プル er @e@ サン ブル 
| (⑬ Appendix/Sample htm 





人 ⑲ Appendix/Sample.html 









画像 を フク リッ ク す る と ・・・ フェ ー ド アウ ト し ます 


画像 を クリ ッ ク す る と 、 徐 々 に 画像 が フェ ー ド アウ ト し ます 。」jQuery を 使う と 、 こ の よう に 見 
栄え の よい Web や 高度 な 機能 を か ん た ん に 実現 する こと が で きま す 。 











cocglisMaps.A 山 ニモ も Rm 


Google マッ プ (第 6 章 ) の 利用 に あたっ て は API キ ー の 取得 が 推奨 され て いま す 。 こ こ で は 


API キー の 取得 ・ 作 成 方 法 を 説明 し ます 。 


以下 の 「Google APls Console」 ペー ジ に サイ ン イ ン し ます 。 サ イン イン に は Google ア カ 
ウン ト か が 必要 で す 。 ペー ジ 上 の 「Create project.……」 ボタ ン を クリ ッ ク し ます 。 


Google APls Console 
https://code.google.com/apis/console/ 


「APls & auth」 一 「APls」 に アク セス し て 「Google Maps API v3」 を 選択 し ます 。 ラ イセ 
ンス 同意 書 に 同意 し て 「Accept」 ボタ ン を 押し ます 。 


Coogle Developers Console 





















《) Wem doud.google.com 


Google Developers Console 


] 

| < APIProject NAME 1 
| 

Overview Google Maps Android AP v2 


APis & aut Googie Maps API v3 





Ad Exchange Buyer API OFF 
| Credentials 
| Consent screen Ad Exchange Seller API orF 
] 
] 
| Notification endpoints DK に ー) 
Permissions AdSense Host API OFF 
| setings 
] AdSense Management API OFF 
] Suppor 
| 
| 
Analytics API OFF 
Compute Engine 
Cloud Storage Audit API oy 
Cloud SQL 
BigQuery API OFF 
BigQuery 
oud Development Blogger APl v3 rr 
Books API OFF 


CalDAV AP 





ma | 庫 











3. 「Credentials. に アク セス し て 、「CREATE NEW KEY」 か ら API キ ー を 取得 し ます 。 





し ーーーーー ニ ーー ニー Shpe psibwom cech 
て ) hmpm 暫 cloud.google.com 





Google Developers Console 


Leam moe 


Mae 


Overview 


Public APl access Key for browser appllcations 」 
Use or this key does | 
APls not require any user API key | 
action or consent 1 


Referers 





doee not grant access 


Consent screen to any account Activation date 
infommation. and is not 


Notification endpoints | 
ued for authorization Activated by 


Leam more 


P 
ermesione 6 | EdNt atlowed referers Regenerate koy De 
Settings _ 
Suppolt Key for Android applications 
Compute Engine API key 
Cloud Storage Androld applications 
Coud SQL Activation date 
BigQuery Activated by | 


Cloud Development 


Edit allowed Androtd applications 。 Regenorate key Deete 








本 
呈 


// (コメ ント ) 
+ le 

: (セミ コロ ン ) 
< (未満 ) 

<= (以下 ) 

ーー (、 1 
> (より 大 きい ) 
>= (以上 ) 

&& (論理 積 ) 
! (論理 否定 ) 
!= ( 非 等 価 ) 

| | (論理 和 ) 


1 行 の 表 を 作成 する 
2d 
2d コ ン テ キ スト 


era 
appendChild() メソ ッ ド 

canvas 要素 

case 6 

clearlnterval() メソッド 
createTextNode() メソ ッ ド 
CSS 


CSS フ ァイル 


DE6 湊 汰 有 叶 銀 ド Sadaoxsao 


getDay() メソ ッ ド 
Document オ ブ ジ ェクト 
getElementByld() メソ ッ ド 
writeln() メソ ッ ド 
DOM Ser 
て の 主 な メン バ 
DOM オ ブ ジ ェクト 
setAttribute() メソ ッ ド 
て を 特定 する …… 
drawImage() メソ ッ ド …… 
Element オ ブ ジ ェクト 





索引 


34 
33 
35 
24 


・ 42 


seatzssuitextsedvos2 が 3 か 


35. 


42 
42 
42 
42 
43 


. 43 


42 
43 


50 
151 
197 


185 
97 
151 
41 
108 
97 


、198 


142 
194 

36 
196 


- 94 


92. 


34 
196 


x 95 


94 
94 
158 
197 


Event オ ブ ジ ェクト 
false 
for 文 
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